Vue过渡动画总结

单元素/组件的过渡

使用transition 的封装组件，实现过渡效果，可以给任何元素和组件添加进入/离开过渡

条件渲染 (使用 v-if) 条件展示 (使用 v-show) 动态组件 组件根节点

例子：

<div id="demo"> <button v-on:click="show = !show"> Toggle </button> <transition name="fade"> <p v-if="show">hello</p> </transition> </div> new Vue({ el: '#demo', data: { show: true } }) .fade-enter-active, .fade-leave-active { transition: opacity .5s; } .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ { opacity: 0; }

过渡的类名

6个切换的class 类比生命周期理解

v-enter：开始时。元素被插入之前生效，元素插入后的下一帧移除。

v-enter-active：生效时。进行中使用，在插入之前生效，在完成之后移除。该类可以定义进入过渡的时间，延迟和曲线函数。

v-enter-to：进入过渡的结束状态。在插入之后下一帧生效 ，在完成之后移除。

v-leave：离开过渡。在离开过渡被触发时立刻生效，下一帧被移除。

v-leave-active：离开过渡生效时。在离开过渡被触发时立刻生效，在完成之后移除。这个类可以被用来定义离开过渡的时间，延迟和曲线函数。

v-leave-to：离开过渡的结束状态。在离开过渡被触发之后下一帧生效，在过渡/动画完成之后移除。

CSS 过渡

常用的过渡都是使用 CSS 过渡

<div id="example-1"> <button @click="show = !show"> Toggle render </button> <transition name="slide-fade"> <p v-if="show">hello</p> </transition> </div> new Vue({ el: '#example-1', data: { show: true } }) /* 可以设置不同的进入和离开动画 */ /* 设置持续时间和动画函数 */ /* slide-fade 是 transition的name */ .slide-fade-enter-active { transition: all .3s ease; } .slide-fade-leave-active { transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0); } .slide-fade-enter, .slide-fade-leave-to /* .slide-fade-leave-active for below version 2.1.8 */ { transform: translateX(10px); opacity: 0; }

自定义过渡的类名

我们可以通过以下 attribute 来自定义过渡类名：

enter-class enter-active-class enter-to-class leave-class leave-active-class leave-to-class

可以和Animate.css结合使用 （了解学习Animate.css https://animate.style/） 例如：

/* 导入Animate.css */ <link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css"> <div id="example-3"> <button @click="show = !show"> Toggle render </button> <transition //默认transition名 name="custom-classes-transition" enter-active-class="animated tada" leave-active-class="animated bounceOutRight" > <p v-if="show">hello</p> </transition> </div> new Vue({ el: '#example-3', data: { show: true } })

延迟 使用duration来设置过渡持续时间 如下：

<transition :duration="1000">...</transition> <transition :duration="{ enter: 500, leave: 800 }">...</transition>

JavaScript 钩子

可以在 attribute 中声明 JavaScript 钩子

<transition v-on:before-enter="beforeEnter" v-on:enter="enter" v-on:after-enter="afterEnter" v-on:enter-cancelled="enterCancelled" v-on:before-leave="beforeLeave" v-on:leave="leave" v-on:after-leave="afterLeave" v-on:leave-cancelled="leaveCancelled" > <!-- ... --> </transition> methods: { beforeEnter: function (el) { // ... }, // 当与 CSS 结合使用时 // 回调函数 done 是可选的 enter: function (el, done) { // ... done() }, afterEnter: function (el) { // ... }, enterCancelled: function (el) { // ... }, //leave 同理 }

结合Velocity.js 学习 https://www.jianshu.com/p/5913903324ff

多个元素过渡

可以使用v-if/v-else来进行多标签过渡

<transition> <table v-if="items.length > 0"> <!-- ... --> </table> <p v-else>Sorry, no items found.</p> </transition>

注意：相同标签名的元素切换时，要用key来设置唯一的值来标记。 还可以用key来简化v-if/v-else 的例子

<transition> <button :key="isEditing"> {{ isEditing? 'Save' : 'Edit' }} </button> </transition>

Vue提供了过渡模式来解决过渡同时进入和离开发生的问题 in-out：新元素先进行过渡，完成之后当前元素过渡离开。 out-in：当前元素先进行过渡，完成之后新元素过渡进入。 如：

<transition name="fade" mode="out-in"> <!-- ... the buttons ... --> </transition>

平时常用out-in

多个组件的过渡

使用动态组件 （动态组件知识扩展） 见下例：

<transition name="component-fade" mode="out-in"> <component v-bind:is="view"></component> </transition> new Vue({ el: '#transition-components-demo', data: { view: 'v-a' }, components: { 'v-a': { template: '<div>Component A</div>' }, 'v-b': { template: '<div>Component B</div>' } } }) .component-fade-enter-active, .component-fade-leave-active { transition: opacity .3s ease; } .component-fade-enter, .component-fade-leave-to /* .component-fade-leave-active for below version 2.1.8 */ { opacity: 0; }

列表过渡

使用 <transition-group> 组件，注意几个特点：

<transition-group>会默认呈现为<span>，可以通过 tag来更换为其他元素内部元素总是要提供唯一的key值CSS 过渡的类将会应用在内部的元素上

以列表的排序过渡为例： 其中使用到了v-move 来改变元素的定位

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.14.1/lodash.min.js"></script> <div id="flip-list-demo" class="demo"> <button v-on:click="shuffle">Shuffle</button> <transition-group name="flip-list" tag="ul"> <li v-for="item in items" v-bind:key="item"> {{ item }} </li> </transition-group> </div> new Vue({ el: '#flip-list-demo', data: { items: [1,2,3,4,5,6,7,8,9] }, methods: { shuffle: function () { this.items = _.shuffle(this.items) } } }) .flip-list-move { transition: transform 1s; //FLIP 简单的动画队列 使用 transforms 将元素从之前的位置平滑过渡新的位置 }

补充FLIP知识：https://aerotwist.com/blog/flip-your-animations/ 需要注意的是使用 FLIP 过渡的元素不能设置为 display: inline 。作为替代方案，可以设置为 display: inline-block 或者放置于 flex 中

可复用的过渡

将 <transition> 或者 <transition-group> 作为根组件，然后将任何子组件放置在其中就可以了

动态过渡

通过 name attribute 来绑定动态值

<transition v-bind:name="transitionName"> <!-- ... --> </transition>