失眠网 > 深入理解Vue动画原理

深入理解Vue动画原理

时间：2020-07-15 23:25:38

相关推荐

深入理解Vue动画原理

深入讲解 Vue 动画原理

文档过渡 & 动画

轮播组件slides

轮播难点在于最末位到首位的切换方式，在讲轮播之前需要讲下动画。

Vue动画支持很多种不同的方式。

Vue动画方式1 - CSS transition

Vue提供了transition组件

HTML//先引入Vue(bootCDN)<script src="/ajax/libs/vue/2.5.17/vue.min.js"></script><div id="demo"><button v-on:click="show = !show">Toggle</button>//1.写`<transition>`<transition name="fade"> <p v-if="show">hello</p></transition></div>CSS//2.写类.fade-enter-active, .fade-leave-active {transition: all 2s;}.fade-enter, .fade-leave-to {opacity: 0;width:100px}//3.设置初始值p{border:1px solid red;width:300px}JSnew Vue({el: '#demo',data: {show: true }})

步骤

第1步.在html里写<transition>

第2步.在css里写.fade开头的一系列类

最后给需要的属性添加初始值

对于这些在过渡中切换的类名来说，如果你使用一个没有名字的，则v-是这些类名的默认前缀。如果你使用了<transition name="fade">，那么v-enter会替换为fade-enter。

文档过渡的类名

在进入/离开的过渡中，会有6个class切换:

v-enter-active、v-leave-active表示过渡时间有多长，一般会合并写这2个类，因为动的都是一样的。

v-enter、v-leave-to表示进入和退出状态，这2个类也会合写。剩下2个一般不用。

p经历的过程：

一开始p就是这个类，但是由于目前是隐藏的show: false，所以需要enter进入DOM，进入DOM的过程可以详细的去控制。

v-enter控制进入时的开始的状态，v-enter-to控制进入时的结束的状态，fade-enter-active控制它如何去添加补间动画，一般不需要加v-enter-to因为结束状态应该就是它原本状态p,没必要加。

等动画结束，就会把这3个类v-enter、fade-enter-active、v-enter-to都删掉，恢复到原始状态p

p由于目前是隐藏的所以需要enter进入DOM，进入DOM的过程可以详细的进行控制。开始是红色，然后变成黑色，过程持续3s。动画结束后enter被删掉，恢复到原始的白色。

CSS 过渡

html<div id="example-1"><button @click="show = !show"> Toggle render </button><transition name="slide-fade"> //滑出<p v-if="show">hello</p></transition></div>CSS/* 可以设置不同的进入和离开动画,设置持续时间和动画函数 */.slide-fade-enter-active {transition: all 3s ease;//滑出淡入不是线性3s}.slide-fade-leave-active {transition: all 1s cubic-bezier(1, 0.5, 0.8, 1);}.slide-fade-enter, .slide-fade-leave-to {//fade-leave-to"淡出的结束状态"就是"淡入开始的状态"，fade-enter对应fade-leave-totransform: translateX(10px);//淡入那一瞬间的位置opacity: 0;}JSnew Vue({el: '#example-1',data: {show: true }})

Vue动画方式2 - CSS animation

html<div id="example-2"><button @click="show = !show">Toggle show</button><transition name="bounce"> //bounce类的前缀<p v-if="show">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></transition></div>CSS.bounce-enter-active {animation: bounce-in .5s;}.bounce-leave-active {animation: bounce-in .5s reverse; //bounce-in}@keyframes bounce-in {//bounce-in0% {transform: scale(0);}50% {transform: scale(1.5);}100% {transform: scale(1);} //结束时恢复正常状态}JSnew Vue({el: '#example-2',data: {show: true }})

keyframes语法

@keyframes spin {0% {opacity: 0;}100% {opacity: 1;}}使用.fade-enter-active{animation:spin 1s reverse;}

类名

可以通过以下 attribute 来自定义过渡类名：enter-class、enter-active-class、enter-to-class、leave-class、leave-active-class、leave-to-class

也可以结合第三方CSS动画库 Animate.css 提供了很多动画效果。

Animate.css

bootCDN选择animate.min.css

示例

html<link href="/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet"><div id="example-3"><button @click="show = !show">Toggle render</button><transitionenter-active-class="animated tada" //animated后接的就是动画效果，格式animated xxxleave-active-class="animated bounce" ><p v-if="show">hello</p></transition></div>JSnew Vue({el: '#example-3',data: {show: true}})CSS 不需要写CSS

同时使用过渡和动画

在一些场景中，你需要给同一个元素同时设置两种过渡动效，比如 animation很快的被触发并完成了，而transition效果还没结束。在这种情况中，你就需要使用type属性并设置animation或transition来明确声明你需要Vue监听的类型。

显性的过渡持续时间

有的时候需要手动设置淡入淡出时间

<transition :duration="1000">...</transition> //:duration="1000"

JavaScript 钩子

文档 JS钩子

可以在attribute中声明JS钩子,你可以用这些钩子知道当前动画处在哪个阶段。

Vue动画方式3 - JS 操作动画

velocity是一个非常著名的用JS操作动画的库,推荐用这个做动画。

bootCDN选择velocity.min.js,最好用版本1.2.3的。

Vue动画方式4 - 多元素动画

一.多个元素的过渡文档

示例1:淡出淡入<div id="example-4"><transition name="fade" mode="out-in"><button key="on" v-if="status==='off'" @click="status='on'">on</button><button key="off" v-else @click="status='off'">off</button></transition></div>JSnew Vue({el: '#example-4',data: {status: 'on'},}) CSS.fade-enter-active,.fade-leave-active {transition: all 1s;}.fade-enter {opacity: 0;}.fade-leave-to {opacity: 0;}示例2:先进再出<transition name="fade" mode="in-out">CSS.fade-enter-active,.fade-leave-active {transition: all 1s;}.fade-enter {opacity: 0;transform:translateX(100px)}.fade-leave-to {opacity: 0;transform:translateX(-100px)}#example-4{position:relative;}button{position:absolute;}JS同上略示例3:实现轮播效果<transition name="fade">CSS#example-4{position:relative;padding:100px;}JS同上略

必须要加key才有动画,不然它不知道你要变什么，它会以为两个button是一个。当两个标签一样的时候一定要加key。

同时生效的进入和离开的过渡不能满足要求，所以Vue提供了过渡模式:

out-in：当前元素先进行过渡，完成之后新元素过渡进入。

in-out(用的少):淡出的时候往左移

mode="out-in/in-out"是为了解决2个元素占用位置冲突的问题。

二.多个组件的过渡

就是用<component>绑定is属性

只需要使用动态组件

//实际上就是tab切换<div id="transition-components-demo"><transition name="component-fade" mode="out-in"><component v-bind:is="view"></component></transition></div>JSnew Vue({el: '#transition-components-demo',data: {view: 'v-a' //view是啥，就是哪个组件的名字},components: {'v-a': {template: '<div>Component A</div>'},'v-b': {template: '<div>Component B</div>'}}})ponent-fade-enter-active, .component-fade-leave-active {transition: opacity .3s ease;}.component-fade-enter, .component-fade-leave-to {opacity: 0;}

适用场景：如果你有10个组件在一个地方显示，想在切的时候有动画。就用<component :is="view">组件,如果你想让第一个组件出现就让view: 'v-a'，view等于第几个组件，就默认显示它。不需要加key。

Vue动画5 - 列表动画(常用)

文档列表过渡

<div id="list-demo" class="demo"><button v-on:click="add">Add</button><button v-on:click="remove">Remove</button><transition-group name="list" tag="p"> <span v-for="item in items" v-bind:key="item" class="list-item">{{item }}</span></transition-group></div>CSS.list-item {display: inline-block;margin-right: 10px;}.list-enter-active, .list-leave-active {transition: all 1s;}.list-enter, .list-leave-to/* .list-leave-active for below version 2.1.8 */ {opacity: 0;transform: translateY(30px);}JSnew Vue({el: '#list-demo',data: {items: [1,2,3,4,5,6,7,8,9],nextNum: 10},methods: {randomIndex: function () {return Math.floor(Math.random() * this.items.length)},add: function () {this.items.splice(this.randomIndex(), 0, this.nextNum++)},remove: function () {this.items.splice(this.randomIndex(), 1)},}})

知识点

1.name="list"list就是css的前缀

2.<transition-group> 组件

使用场景:要想用v-for实现同时渲染整个列表，这时候就可以使用<transition-group>组件。

该组件特点:

(1)默认为一个<span>,也可以通过 tag attribute更换为其他元素。

<transition-group name="list" tag="p"><span v-for="item in items" v-bind:key="item" class="list-item">{{item }}</span></transition-group>

tag='p'tag取值是p，<transition-group>就会将自身替换为p标签。tag取值是什么，<span>就会被什么标签包围。不写tag就默认是<span>。

(2)过渡模式不可用，因为我们不再相互切换特有的元素。

mode="out-in"不能用，，<transition-group>不支持mode

(3)内部元素总是需要提供唯一的 key attribute 值。

内部元素<span>必须写keyv-bind:key="item"