深入讲解 Vue 动画原理

文档过渡 & 动画

轮播组件slides
轮播难点在于最末位到首位的切换方式，在讲轮播之前需要讲下动画。
Vue动画支持很多种不同的方式。

Vue动画方式1 - CSS transition

Vue提供了transition组件

HTML
//先引入Vue(bootCDN)
<script src="https://cdn.bootcdn.net/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}JS
new 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;
}JS
new 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);} //结束时恢复正常状态
}JS
new 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="https://cdn.bootcdn.net/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>JS
new 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的。

<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script><div id="example-4"><button @click="show = !show">Toggle</button><transitionv-on:before-enter="beforeEnter"v-on:enter="enter"v-on:leave="leave"v-bind:css="false"><p v-if="show">Demo</p></transition>
</div>JS
new Vue({el: '#example-4',data: {show: false},methods: {beforeEnter: function (el) {el.style.opacity = 0el.style.transformOrigin = 'left'},enter: function (el, done) {Velocity(el, { opacity: 1, fontSize: '1.4em' }, { duration: 300 })Velocity(el, { fontSize: '1em' }, { complete: done })},leave: function (el, done) {Velocity(el, { translateX: '15px', rotateZ: '50deg' }, { duration: 600 })Velocity(el, { rotateZ: '100deg' }, { loop: 2 })Velocity(el, {rotateZ: '45deg',translateY: '30px',translateX: '30px',opacity: 0}, { complete: done })}}
})

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>JS
new 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>JS
new 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>'}}
})CSS
.component-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);
}JS
new 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"
(4)CSS 过渡的类将会应用在内部的元素中，而不是这个组/容器本身。

for循环如何做动画？
<transition-group> + tag="div" + v-for循环的模版(span/div)
注意:不能加其它的标签,for循环模版外只能是<transition-group>

总结

更多文章，请点击我的博客

深入理解Vue动画原理相关推荐

理解vue ssr原理，自己搭建简单的ssr框架
理解vue ssr原理,自己搭建简单的ssr框架前言大多数Vue项目要支持SSR应该是为了SEO考虑,毕竟对于WEB应用来说,搜索引擎是一个很大的流量入口.Vue SSR现在已经比较成熟了,但是如 ...
打造简易NineoldAndroids动画库，深入理解Android动画原理
简介 NineoldAndroids是Github上一个著名的动画库,简单来说,NineOldAndroids是一个向下兼容的动画库,主要是使低于API 11的系统也能够使用View的属性动画. 网上 ...
android安装教程！深入理解Flutter动画原理，大厂面试题汇总
背景知乎客户端中有一个自己维护的 Hybrid 框架,在此基础上开发了一些 Hybrid 页面,当需要前端或者客户端开发接口的时候,就涉及到联调的问题. 和一般的前端 <=> 服务端, ...
深入理解Flutter动画原理，已整理成文档
正文从我个人的角度写写30多岁码工的感受:的确是受年龄压力开始增大了.比如二十多岁的小年轻,可能什么都懂,对组里的东西很熟悉.有时候我也怀疑自己是不是智商不够,是不是自学能力太差,是不是基础不行,别 ...
你真的了解Android系统启动流程吗？深入理解Flutter动画原理，讲的明明白白！
开头大家都知道,找工作的时候高薪不好拿,一般人能拿 30k 的 offer 就不错了.据我所知百分之九十的Android开发都在30k以下! 但是在我的群里有一位同学,平时就喜欢研究源码和框架,然后 ...
vue如何使用原生js写动画效果_深入理解 Vuejs 动画效果
本文主要归纳在 Vuejs 学习过程中对于 Vuejs 动画效果的各个相关要点.由于本人水平有限,如文中出现错误请多多包涵并指正,感谢.如果需要看更清晰的代码高亮,请跳转至我的个人站点的 Vue 中的 ...
理解Vue深度响应原理
Vue核心原理之数据的深度响应 1.问题的引入为什么点击下面的button界面会出现自增? <div id="example-2"> <simple-count ...
理解vue中less的scoped和/deep/工作原理
理解vue中less的scoped和/deep/工作原理 scoped /deep/ 实战总结 scoped vue项目一般是单页面.多组件,整个项目共用一个css样式表,有时候我们在写组件的过程中 ...
彻底理解Vue数据响应式原理
彻底理解Vue数据响应式原理当创建了一个实例后,通过将数据传入实例的data属性中,会将数据进行劫持,实现响应式,也就是说当这些数据发生变化时,对应的视图也会发生改变. const data = { ...

深入理解Vue动画原理