CRM理解vue动画
Vue动画方式1 - CSS transition
Vue提供了transition组件
//先引入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>
//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 }
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个一般不用。
<transition>，则
v- 是这些类名的默认前缀。如果你使用了
<transition name="my-transition">，那么
v-enter 会替换为
my-transition-enter。
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 过渡
<div id="example-1"> <button @click="show = !show"> Toggle render </button> <transition name="slide-fade"> //滑出 <p v-if="show">hello</p> </transition> </div>
/* 可以设置不同的进入和离开动画,设置持续时间和动画函数 */ .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-to transform: translateX(10px);//淡入那一瞬间的位置 opacity: 0; }
new Vue({ el: '#example-1', data: { show: true } })
Vue动画方式2 - CSS animation
<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>
.bounce-enter-active { animation: bounce-in .5s; } .bounce-leave-active { animation: bounce-in .5s reverse; //bounce-in } @keyframes bounce-in { //bounce-in 0% {transform: scale(0);} 50% {transform: scale(1.5);} 100% {transform: scale(1);} //结束时恢复正常状态 }
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示例
<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> <transition enter-active-class="animated tada" //animated后接的就是动画效果，格式animated xxx leave-active-class="animated bounce" > <p v-if="show">hello</p> </transition> </div>
new Vue({ el: '#example-3', data: {show: true} }) //CSS 不需要写CSS
同时使用过渡和动画
Vue 为了知道过渡的完成，必须设置相应的事件监听器。它可以是 transitionend 或 animationend，这取决于给元素应用的 CSS 规则。如果你使用其中任何一种，Vue 能自动识别类型并设置监听。
但是，在一些场景中，你需要给同一个元素同时设置两种过渡动效，比如 animation 很快的被触发并完成了，而 transition 效果还没结束。在这种情况中，你就需要使用 type attribute 并设置 animation 或 transition 来明确声明你需要 Vue 监听的类型。
在一些场景中，你需要给同一个元素同时设置两种过渡动效，比如 animation很快的被触发并完成了，而transition效果还没结束。在这种情况中，你就需要使用type属性并设置animation或transition来明确声明你需要Vue监听的类型。
显性的过渡持续时间
在很多情况下，Vue 可以自动得出过渡效果的完成时机。默认情况下，Vue 会等待其在过渡效果的根元素的第一个 transitionend 或 animationend 事件。然而也可以不这样设定——比如，我们可以拥有一个精心编排的一系列过渡效果，其中一些嵌套的内部元素相比于过渡效果的根元素有延迟的或更长的过渡效果。
在这种情况下你可以用 <transition> 组件上的 duration prop 定制一个显性的过渡持续时间 (以毫秒计)：
<transition :duration="1000">...</transition>
你也可以定制进入和移出的持续时间：
<transition :duration="{ enter: 500, leave: 800 }">...</transition>
有的时候需要手动设置淡入淡出时间
<transition :duration="1000">...</transition> //:duration="1000"
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) { // ... }, // -------- // 离开时 // -------- beforeLeave: function (el) { // ... }, // 当与 CSS 结合使用时 // 回调函数 done 是可选的 leave: function (el, done) { // ... done() }, afterLeave: function (el) { // ... }, // leaveCancelled 只用于 v-show 中 leaveCancelled: function (el) { // ... } }
这些钩子函数可以结合 CSS transitions/animations 使用，也可以单独使用。
当只用 JavaScript 过渡的时候，在
enter和leave中必须使用done进行回调。否则，它们将被同步调用，过渡会立即完成。推荐对于仅使用 JavaScript 过渡的元素添加
v-bind:css="false"，Vue 会跳过 CSS 的检测。这也可以避免过渡过程中 CSS 的影响。
可以在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> <transition v-on:before-enter="beforeEnter" v-on:enter="enter" v-on:leave="leave" v-bind:css="false" > <p v-if="show"> Demo </p> </transition> </div>
new Vue({ el: '#example-4', data: { show: false }, methods: { beforeEnter: function (el) { el.style.opacity = 0 el.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>
new Vue({ el: '#example-4', data: { status: 'on'}, })
.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">
.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">
#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>
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>' } } })
.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>
.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); }
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>
总结
