Vue动画操作
概述
Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。
包括以下工具：
- 在 CSS 过渡和动画中自动应用 class
- 可以配合使用第三方 CSS 动画库，如 Animate.css
- 在过渡钩子函数中使用 JavaScript 直接操作 DOM
- 可以配合使用第三方 JavaScript 动画库，如 Velocity.js
- Vue 提供了
transition
- 的封装组件，在下列情形中，可以给任何元素和组件添加进入/离开过渡。
过渡的类名
在进入/离开的过渡中，会有 6 个 class 切换。
-
v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。 -
v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。 -
v-enter-to: 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时v-enter被移除)，在过渡/动画完成之后移除。 -
v-leave: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。 -
v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。 -
v-leave-to: 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时v-leave被删除)，在过渡/动画完成之后移除。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="./lib/vue-2.4.0.js"></script> </head> <body> <style> /* 使用Vue过度类来实现动画，只需要添加下面的类就行了 */ /* 动画在进入前和离开后的状态 */ .v-enter,.v-leave-to{ opacity: 0; transform: translate(100px,0); } /* 表示动画在执行的时候的状态 */ .v-enter-active,.v-leave-active{ transition: all 1s ease; } /* 如果我想给h1 添加不同的动画呢 需要更改transition的name 属性 */ .china-enter,.china-leave-to{ opacity: 0; transform: translate(0,150px); transition: all .4s ease; } .china-enter-active,.china-leave-active{ transition: all 1s ease-in-out; } </style> <div class="container"> <input type="button" value="动画" @click="animationClick"> <transition> <h3 id="cc" v-show="flog">中国70岁生日快乐</h3> </transition> <input type="button" value="动画2" v-on:click="animationClick2"> <transition name="china"> <h1 v-show="flog2">祖国生日快乐</h1> </transition> </div> <script> var vm=new Vue({ el:'.container', data:{ flog:false, flog2:false }, methods: { animationClick:function(){ this.flog=!this.flog }, animationClick2(){ this.flog2=!this.flog2 } } }); </script> </body> </html>
使用第三方Animate类库 来实施Vue动画
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="./lib/vue-2.4.0.js"></script> <link rel="stylesheet" href="./lib/Animate.css"> </head> <body> <div class="container"> <input type="button" value="动画" @click="animationClick"> <!-- 使用第三方 Animate.css类库 注意： 1. 需要在transition 元素中 添加 enter-active-class 和leave-active-calss 类名 2.在enter-active-class和leave-active-class中 必须要写上 animated 之后在跟上动画的类名 3.:duration 持续时间 是绑定属性v-bind --> <transition enter-active-class="animated hinge" leave-active-class="animated bounceOutRight" :duration="10"> <h3 id="cc" v-show="flog">中国70岁生日快乐</h3> </transition> </div> <script> var vm=new Vue({ el:'.container', data:{ flog:false, }, methods: { animationClick:function(){ this.flog=!this.flog }, animationClick2(){ this.flog2=!this.flog2 } } }); </script> </body> </html>
显性的过渡持续时间
2.2.0 新增
在很多情况下，Vue 可以自动得出过渡效果的完成时机。默认情况下，Vue 会等待其在过渡效果的根元素的第一个 transitionend 或 animationend 事件。然而也可以不这样设定——比如，我们可以拥有一个精心编排的一系列过渡效果，其中一些嵌套的内部元素相比于过渡效果的根元素有延迟的或更长的过渡效果。
在这种情况下你可以用 <transition> 组件上的 duration 属性定制一个显性的过渡持续时间 (以毫秒计)：
<transition :duration="1000">...</transition>
|
你也可以定制进入和移出的持续时间：
<transition :duration="{ enter: 500, leave: 800 }">...</transition>
|
使用js钩子函数（也就是动画的生命周期函数）
语法：可以在属性中声明 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) {
// ...
}
}
下面是操作实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="./lib/vue-2.4.0.js"></script> <style> .ball { width: 15px; height: 15px; border-radius: 50%; background-color: red; } </style> </head> <body> <div id="app"> <input type="button" value="快到碗里来" @click="flag=!flag"> <!-- 1. 使用 transition 元素把 小球包裹起来 --> <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter"> <div class="ball" v-show="flag"></div> </transition> </div> <script> // 创建 Vue 实例，得到 ViewModel var vm = new Vue({ el: '#app', data: { flag: false }, methods: { // 注意： 动画钩子函数的第一个参数：el，表示 要执行动画的那个DOM元素，是个原生的 JS DOM对象 // 大家可以认为 ， el 是通过 document.getElementById('') 方式获取到的原生JS DOM对象 beforeEnter(el){ // beforeEnter 表示动画入场之前，此时，动画尚未开始，可以 在 beforeEnter 中，设置元素开始动画之前的起始样式 // 设置小球开始动画之前的，起始位置 el.style.transform = "translate(0, 0)" }, enter(el, done){ // 这句话，没有实际的作用，但是，如果不写，出不来动画效果； // 可以认为 el.offsetWidth 会强制动画刷新 el.offsetWidth // enter 表示动画 开始之后的样式，这里，可以设置小球完成动画之后的，结束状态 el.style.transform = "translate(150px, 450px)" el.style.transition = 'all 1s ease' // 这里的 done， 起始就是 afterEnter 这个函数，也就是说：done 是 afterEnter 函数的引用 done() }, afterEnter(el){ // 动画完成之后，会调用 afterEnter // console.log('ok') this.flag = !this.flag } } }); </script> </body> </html>
