课程章节： Vue 中的动画特效
主讲老师： Dell
课程内容：
今天学习的内容包括：
Vue中动画效果
过渡动画
keyframe动画
animate.css动画库
velocity.js动画库
多个元素/组件过渡效果
列表渲染过渡效果
动画封装
课程收获：
5.1 心得：
vue中css动画的原理
1、显示
- 会给DOM节点添加class----enter、enter-active，
- 会移除enter 添加上 enter-to
- 移除 enter-active，enter-to
.fade-enter {
opacity: 0;
}
.fade-enter-active {
transition: opacity 3s;
}
注意：enter-active贯穿整个流程
2、隐藏
- 会给DOM节点添加class----leave、leave-active，
- 会移除leave 添加上 leave-to
- 移除 leave-active，leave-to
.fade-leave-to {
opacity: 0;
}
.fade-leave-active {
transition: opacity 3s;
}
注意：enter-active贯穿整个流程
5.2 心得：
@keyframes规则创建动画
<transition name="fade"></transition>
Vue中使用keyframes：
@keyframes bounce-in {
0% {
transform: scale(0);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}
.fade-enter-active {
transform-origin: left center; //transform-origin 属性允许您改变被转换元素的位置
animation: bounce-in 1s;
}
.fade-leave-active {
transform-origin: left center;
animation: bounce-in 1s;
}
自定义动画类名：在<transition中定义>
<transition
name="fade"
enter-active-class="active" //等价于.fade-enter-active
leave-active-class="leave">
</transition>
当引入animate.css库后可以直接使用库的样式
<transition
name="fade"
enter-active-class="animated swing"
leave-active-class="animated shake">
</transition>
5.3 心得：
在vue中同时使用过渡和动画
.fade-enter-active,.fade-leave-active{
transition:opacity 3s;
}
<transition
name="fade"
type="transition" // 动画效果时长以transition为准
:duration={enter:3000,leave:3000} // 自定义时长
appear // 定义首次进入有动画效果
enter-active-class="animated swing fade-enter-active"
leave-active-class="animated shake fade-leave-active"
appear-active-class="animated swing"
>
</transition>
页面首次进入画面
<transition appear appear-active-class='执行动画的名字'></transition>
页面刷新后动画：加入appear属性和.appear-class=“animate__animated 名字”
<transition
appear
appear-active-class="animate__animated animated__名字">
过渡效果+@keyframes： 在自定义类中加入.fade-enter-active和.fade-leave-active 控制时间：
.fade-enter, .fade-leave-to {opacity: 0;}
.fade-enter-active, .fade-leave-active {transition: opacity 3s;}
设置动画时常：type=“transition” - 以transition的时长为基准
也可以自定义动画时长：:duration=“时间”
更复杂的设置：
<transition
duration: "{enter: 5000, leave: 10000}">
Vue中的 Js 动画与 Velocity.js 的结合
<transition
@before-enter='handleBeforeEnter' // enter入场动画 还没开始执行的钩子
@enter='handleEnter' //动画执行的钩子
after-enter='handleAfterEnter'> //（done回调后使用）
</transition>
handleBeforeEnter:function(el){ // el是transition 包裹的div标签
el.style.color = 'red'
},
handleEnter:function(el,done){ // el是transition 包裹的div标签
setTimeout(()=>{
el.style.color = 'green'
},2000)
setTimeout(()=>{
done() //回调函数
},4000)
},
handleAfterEnter:function(el){
el.style.color = '#000'
}
leave–离场动画钩子同理
velocity 可以传三个参数（el,动画动作，{duration：‘时间’，compete：done–调起结束回调}）
5.4 心得：
动画钩子：@before-enter
<transition @before-enter="handleBeforeEnter">
handleBeforeEnter: function(el) { el.style.color = 'red'}
动画钩子：@enter
handleEnter: function(el，done) {
setInterval(() = > {
el.style.color = 'green'
), 2000}
回掉函数done，需要手动调用，表示动画执行完毕
handleEnter: function(el，done) {
setInterval(() = > {
el.style.color = 'green'
), 2000}
setInterval(() = > {
done();
), 2000}
}
done执行完毕后，vue再会执行一个函数@after-enter
handleAfter: function(el) {
el.style.color = '#000'}
总结js动画钩子：
<transition
@before-enter="handleBeforeEnter"
@enter="handleEnter"
@after-enter="handleAfterEnter"
>
出场动画：
<transition
@before-leave="handleBeforeLeave"
@leave="handleLeave"
@after-leave="handleAfterLeave"
>
使用Velocity：
在handleEnter方法中加入
Velocity使el元素，透明度变成1，耗时1秒，执行完毕后，调用done函数，继续执行handleAfterEnter函数
handleEnter: function(el，done) {
Velocity(el, {
opacity: 1
}, {duration: 1000,
complete: done
})
}
5.5 心得：
vue多个元素或组件过渡
1、多个元素过渡
<style>
.v-enter,.v-leave-to{
opacity: 0;
}
.v-enter-active,.v-leave-active{
transition: opacity 2s;
}
</style>
<transition mode="out-in"> // out-in 先隐藏在显示 , in-out 先显示在隐藏
<div v-if="show" key='hello'>hello</div> //防止dom元素复用，必须使用 key 值
<div v-else key='bye'>bye bye</div >
</transition>
<button type="button" @click="change()">切换</button>
2、多个组件过渡
<transition mode="out-in">
<component :is="type"><component> //动态组件方法
</transition>
<button type="button" @click="change()">切换</button>
<script>
data:{
type:'child'
},
methods:{
change:function(){
this.type = this.type === 'child' ? 'child-one':'child'
}
}
</script>
5.6 心得：
列表中的过渡：<transition-group>
.v-enter, .v-leave-to {opacity: 0}
.v-enter-active, .v-leave-active {
transition: opacity 1s}
<transition-group>
<div v-for="item of list" :key="item.id">
{{item.title}}
</transition-group>
data: {
list: []
},
methods: {
handleClick: function() {
this.list.push({
id: count++,
title: 'hello World')}
相当于给每个div外面套了一层transition：
<transition>
<div>Hello World</div>
</transition>
<transition>
<div>Hello World</div>
</transition>
<transition>
<div>Hello World</div>
</transition>
<transition>
<div>Hello World</div>
</transition>
5.7 心得：
Vue中的动画封装通过组件进行封装<fade :show="show">
<div>Hello Div!</div>
</fade>Vue.component('fade', {
props: ['show'], //接收show判断是否显示
template: `
<transition>
<slot v-if='show'></slot> //定义一个插槽接收父组件的内容
</transition>
`
})Vue.component('fade', {
props: ['show'],
template: `
<transition
@beforeEnter="handleBeforeEnter"
@enter="handleEnter"
@after-enter='handleAfterEnter'>
<slot v-if='show'></slot>
</transition>
`,
methods: {
handleBeforeEnter: function(el) {
el.style.color = 'red';
},
handleEnter: function(el, done) {
setTimeout(() = > {
el.style.color = 'green';
done();
}, 2000)
handleAfterEnter:function(el){
el.style.color = '#000'
}
})