vue.js 过渡和动画

更新日期: 2019-09-11阅读: 2.2k标签: 过渡

vue 在插入、更新或者移除 dom 时,动态添加css类名来达到想要的动画效果


1.transition标签

给元素包裹一个transition标签,并设置name属性的值,这个值可以随意设置,但是他会决定Dom更新时自动添加的css类名

这里name="xxx"作为演示

<div id="app">
    <button @click="isShow = !isShow">点我切换显示隐藏</button>
    <transition name="xxx">
        <p v-show="isShow">{{msg}}</p>
    </transition>
</div>


(1)当点击按钮,将p元素由显示切换成隐藏时,p元素添加2个css类:

<p class="xxx-leave-active xxx-leave-to">vue动画效果</p>

当p元素完全隐藏时,将移除相应的css类

<p class="" style="display: none;">vue动画效果</p>

(2)再次点击按钮,将p元素由隐藏切换成显示时,p元素添加2个css类:

<p class="xxx-enter-active xxx-enter-to" style="">vue动画效果</p>

当p元素完全显示时,将移除相应的css类

<p class="" style="">vue动画效果</p>

(3)xxx-enter和xxx-leave设定的样式会在元素切换开始的瞬间生效。(虽然在dom中的class属性里面看不见这2个类)通俗的说,这2个类给过渡提供了起始属性值,而xxx-enter-to和xxx-leave-to提供了结束属性值,以便计算过渡效果

(4)v-show/v-if的效果要等过渡和动画结束之后才生效


2.设置css类的属性

前面的例子说明,当元素切换时会添加4个css类,需要为这些css类设置具体的属性才能看到效果

<style>
    .xxx-enter-active,.xxx-leave-active{
        /* 设定过渡效果 */
        transition: all 10s;
    }
    /* 显示 */
    .xxx-enter{
        /* 过渡的起始效果 */
        opacity: 0;
    }
    .xxx-enter-to{
        /* 过渡的结束效果 */
        opacity: 1;
    }
    /* 隐藏 */
    .xxx-leave{
        /* 过渡的起始效果 */
        opacity: 1;
    }
    .xxx-leave-to{
        /* 过渡的结束效果 */
        opacity: 0;
    }
</style>

可以简写成:

<style>
    .xxx-enter-active,.xxx-leave-active{
        /* 设定过渡效果 */
        transition: all 10s;
    }
    .xxx-enter,.xxx-leave-to{
        opacity: 0;
    }
    .xxx-enter-to,.xxx-leave{
        opacity: 1;
    }
</style

PS:一般都是在元素显示或者隐藏的过程中的类名加入过渡样式,在元素刚进入动画时和结束动画时设定开始的样式属性值和结束样式属性值


3.动画

(1)注册动画

@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}

(2)为目标元素包裹transition标签,并设置name属性的值

<div id="app">
    <button @click="isShow = !isShow">点我切换显示隐藏</button>
    <br>
    <transition name="xxx">
        <!-- 设定成行内块级元素,方便控制元素大小 -->
        <p v-show="isShow" style="display: inline-block">{{msg}}</p>
    </transition>
</div>

(3)设置css类的属性

.xxx-enter-to,.xxx-leave-to{
    /* 调用动画 */
    nimation: bounce-in 10s;
}
.xxx-enter,.xxx-leave{
    /* 添加起始效果,适应动画的第一帧 */
    transform: scale(0);
}


4.自定义过渡的类名

如果不想使用vue定义的类名,而是使用自己或者第三方已经定义好的类名,可以在transition标签中通过下面的属性指定相应的类名:
enter-class
enter-active-class
enter-to-class (2.1.8+)
leave-class
leave-active-class
leave-to-class (2.1.8+)

基本使用:

//这里用到第三方的类名
<link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">
//name属性可以不写
<transition 
name=""
enter-active-class="animated tada"
leave-active-class="animated bounceOutRight"
>

animate.css预置了很多css类,可以在官网选择想要的类并查看相应的动画效果,不过记得要添加基本类animated


5.多个元素过渡

(1)transition标签渲染后内部只能有一个子元素,所以当要对多个元素进行切换时只能使用v-if而不能使用v-show
(2)当有相同标签名的元素切换时,需要通过 key 特性设置唯一的值来标记以让 Vue 区分它

<transition name="xxx">
    <li v-if="index===0" key="1">
        <h1>第一屏</h1>
    </li>
    <li v-else key="2">
        <h1>第二屏</h1>
    </li>
</transition>
<style>
    .xxx-enter-active,.xxx-leave-active{
        transition: all 10s;
    }
    .xxx-enter{
        transform: translateX(100%);
    }
    .xxx-leave-to{
        transform: translateX(-100%);
    }
</style>


6.过渡模式 mode

对于上面2个元素切换时,默认情况下。元素进入和元素离开同时发生,会出现两个元素同时出现在页面的情形。可以通过修改mode属性来成其他效果。
in-out:新元素先进行过渡,完成之后当前元素过渡离开。
out-in:当前元素先进行过渡,完成之后新元素过渡进入。

<transition name="xxx"  mode="out-in">
    <li v-if="index===0" key="1">
        <h1>第一屏</h1>
    </li>
    <li v-else key="2">
        <h1>第二屏</h1>
    </li>
</transition>

out-in:先出后进

in-out:先进后出


7.钩子函数

可以在transition标签中通过属性中声明 JavaScript 钩子
回调函数的第一个参数为el,就是当前元素

<transition name="xxx"  mode="out-in"
    @before-enter="beforeEnter"
    @enter="enter"
    @after-enter="afterEnter"
 
    @before-leave="beforeLeave"
    @leave="leave"
    @after-leave="afterLeave"
>
<script>
    new Vue({
        el:"#app",
        data:{
            index:0,
            msg:"vue动画效果"
        },
        methods:{
            test(){
                this.index===0? this.index=1:this.index=0
            },
            beforeEnter(){
                console.log('beforeEnter')
            },
            enter(){
                console.log('enter')
            },
            afterEnter(){
                console.log('after-enter')
            },
            beforeLeave(){
                console.log('beforeLeave')
            },
            leave(){
                console.log('leave')
            },
            afterLeave(){
                console.log('afterLeave')
            }
        }
    })
</script>


8.初始渲染的过渡

(1)默认情况下,初次渲染时没有过渡和动画效果,可以通过 appear 特性设置节点在初始渲染的过渡

<transition appear>
  <!-- ... -->
</transition>

(2)还可以自定义初始渲染过渡的 CSS 类名

<transition
  appear
  appear-class="custom-appear-class"
  appear-to-class="custom-appear-to-class" (2.1.8+)
  appear-active-class="custom-appear-active-class"
>
  <!-- ... -->
</transition>

(3)初次渲染的钩子函数

<transition
  appear
  v-on:before-appear="customBeforeAppearHook"
  v-on:appear="customAppearHook"
  v-on:after-appear="customAfterAppearHook"
  v-on:appear-cancelled="customAppearCancelledHook"
>
  <!-- ... -->
</transition>

链接: https://www.fly63.com/article/detial/6388

关于vue状态过渡transition不起作用的原因

总所周知,vue中的transition标签可以方便得进行动画过渡,使用的方法也很简单。这里需要主要一点的是:过渡的元素只能是以下之一:

关于CSS Transition,你需要知道的事

CSS3的过渡属性,给web应用带来了简单优雅的动画,但是比起初次相见,他(transition)有许多细则。在这片文章中,我将会专研CSS3的过渡(transition)中更加复杂的部分,从链式和事件到硬件加速和动画函数。

Transition 过渡

在一定时间内平滑的过渡,也就是圆滑的以动画效果改变css的属性值。它的过渡可以由鼠标点击、焦点获取或者失去、被点击事件或对元素的改变中触发;不能主动触发,只能被动触发

vue 过渡

添加过渡效果的方法:在 CSS 过渡和动画中自动应用 class,可以配合使用第三方 CSS 动画库,如 Animate.css,在过渡钩子函数中使用 JavaScript 直接操作 DOM,可以配合使用第三方 JavaScript 动画库,如 Velocity.js

CSS过渡属性transition与display冲突问题

当改变元素display属性时,过渡属性transition失效。display:none的时候,页面文档流中将不会存在该元素。transition无法对一个从有到无的元素产生过渡效果。

基于 React 实现一个 Transition 过渡动画组件

过渡动画使 UI 更富有表现力并且易于使用。如何使用 React 快速的实现一个 Transition 过渡动画组件?实现一个基础的 CSS 过渡动画组件,通过切换 CSS 样式实现简单的动画效果,也就是通过添加或移除某个 class 样式。

css过渡和css动画的区别是什么?

CSS3中出现很多新的特性,其中比较好玩的3D操作就是:过渡和动画效果。那么css过渡和css动画的区别是什么?下面本篇文章就来给大家介绍一下CSS中过渡和动画的区别,希望对大家有所帮助。

transition不会产生效果 height:auto

假设一个DIV要实现手风琴效果,展开时根据内容自适应高度即从height: (any)px; 变化到 height: auto;此时设置transition不会产生效果, 原因是 transition 无法将 ()px 变为不是具体数值的 auto

4 个Vue 路由过渡动效

Vue 路由过渡是对 Vue 程序一种快速简便的增加个性化效果的的方法。可以让你在程序的不同页面之间增加平滑的动画和过渡。如果使用得当,可以使你的程序显得更加专业,从而增强用户体验。

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!