Vue相关(过渡动画)
Vue 过渡 && 动画
一、CSS过渡
1.transition标签可以用来封装需要过渡的元素，添加entering/leaving 过渡，
条件是：
（1）使用条件渲染语句 v-if/v-show
（2）动态组件
（3）组件根节点
通过style标签设置过渡动画时需要为transition指定name属性，当指定了name属性之后，
vue会自动去找几个过渡动画需要的类
active类中一般放过渡属性，例如transition,animation等，放animation需要指定动画关键帧
（v-是这些类名的前缀，会被替换为transition中name属性）
v-enter-active（进入中，过渡状态）
v-enter（进入之前，开始过渡状态）
v-enter-to(进入结束，开始过渡的结束状态) 一般不用
v-leave-active（离开中，过渡状态）
v-leave（离开前，离开过渡状态）
v-leave-to(离开结束，离开过渡的结束状态) 一般不用
二、CSS动画
1.CSS动画同CSS过渡,也需要四个类，active类中放的是animation,需要指定关键帧，关键帧使用transform定义动画状态，当设置了transition的name属性之后，vue会自动去探测是否存在这几个类，如果有，就执行了类中的动画
2.自定义动画，通常用于和第三方动画库相结合
<transition
enter-active-class="animated tada"
leave-active-class="animated bounceOutRight"
>
<p v-if="show">hello</p>
</transition>
为transition标签设置以下几个属性来指定动画需要的类,这几个类的优先级高于普通类，与第三方动画库相结合时十分有用
(1)enter-active-class
(2)enter-class
(3)enter-to-class
(4)leave-active-class
(5)leave-class
(6)leave-to-class
三、使用钩子函数设置动画
可以通过在transition标签中绑定钩子函数来设置过渡动画，几个钩子函数如下：
| 钩子函数 | 对应的参数 |
|---|---|
| before-enter | (el) |
| enter | (el,done) |
| after-enter | (el) |
| enter-cancelled | (el) |
| before-leave | (el) |
| leave | (el,done) |
| after-leave | (el) |
| leave-cancelled | (el) |
通常在before-enter或before-leave中指定状态，在enter或leave函数中执行动画
beforeEnter: function (el) {
// 进入之前
$(el).css({
opacity: 0,
color: 'red',
});
},
enter: function (el, done) {
// 第一种
$(el).animate({
opacity:1,
},3000,function(){
//需要在动画执行完毕的回调函数中调用done
done();
})
// 第二种
$(el).fadeIn(1000,()=>{
done();
})
// 第三种 引入velocity动画库
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
Velocity(el, {opacity: 1, translateX: '20px', fontSize: '2em'}, {duration: 300});
Velocity(el, {translateX: '0px', fontSize: '1em'}, {complete: done})
},
当只用 JavaScript 过渡的时候， 在 enter 和 leave 中，回调函数 done 是必须的 。 否则，它们会被同步调用，过渡会立即完成。
四、初始渲染的过渡
通过为transition标签添加appear属性设置节点在初始渲染时的过渡效果
-
同样可以定义自定义类名
appear-class
appear-to-class
appear-active-class -
通过可以定义JavaScript中的钩子函数
before-appear
appear
after-appear
appear-cancelled -
为transiton设置appear属性，如果没有对应的过渡类或者钩子函数会默认去执行before-enter,和enter钩子函数的内容
五、多元素的过渡
注意相同标签切换需要设置key属性：
当有相同标签名的元素切换时，需要通过 key 特性设置唯一的值来标记以让 Vue 区分它们，否则 Vue 为了效率只会替换相同标签内部的内容
transition标签内部最外部根节点只能有一个，但通过v-if,v-else-if,v-else设置切换时候可以有多个跟标签
六、过渡模式
为transition标签设置mode属性
(1)in-out:新元素先进行过渡，完成之后当前元素过渡离开
(2)out-in:当前元素先进行过渡，完成之后新元素过渡进入
七、多组件过渡
使用v-bind:is属性为保留组件component来指定要渲染成哪个组件
<transition name="component-fade" mode="out-in">
<component v-bind:is="view"></component>
</transition>
八、列表过渡
使用tranistio-group标签来为多个节点设置过渡
tranistio-group标签默认渲染成span标签，可通过为其设置tag="div"属性将其渲染成div
tranistio-group内部元素总是需要 提供唯一的 key 属性值
九、列表位移过渡
transition-group标签添加v-move属性定义元素位置改变时使用的动画，同进入和离开动画一样，v会被替换成transition-group便签的name属性，也可以通过move-class自定义类来设置自定义位移时使用的类
当要设置离开时的位移过渡时需要设置绝对定位position:absolute
<!--filp-list为transition-group便签的name属性-->
.flip-list-move {
transition: transform 1s;
}
十、Lazy sudoku
通过tranistion-group标签设置随机数独元素的切换，注意transition-group内的每个元素的v-bind:key需要绑定的和元素相关，不然只是简单的数字替换，非元素的移动
CSS:
* {
box-sizing: border-box;
}
.box {
display: block;
margin: 0 auto;
width: 450px;
height: 450px;
}
.item {
display: inline-block;
width: 50px;
height: 50px;
line-height: 50px;
border: 1px solid #eee;
text-align: center;
color: #666;
}
.fade-move {
transition: all 0.4s linear;
}
HTML:
<div id="app">
<transition-group name="fade" class="box">
<span v-for="item in numArr" :key="item.id" class="item" :style="item.bg">{{ item.num }}</span>
</transition-group>
</div>
JavaScript
var app = new Vue({
el: '#app',
data: {
numArr: new Array(81).fill(1).map((value, index) => {
return {
num: (index % 9),
id: index,
bg:{
backgroundColor:'hsl(' + Math.floor(Math.random() * 360) + ',70% ,80%)'
}
}
}),
},
methods: {
shuffle: function () {
this.numArr.sort(function () {
return Math.random() - 0.5;
});
}
},
created: function () {
this.shuffle();
}
});
十一、可复用的过渡
将transition或者transition-group标签作为组件的根标签即可实现可复用的过渡
