官方文档：https://cn.vuejs.org/v2/guide/transitions.html
对官方文档做下个人的整理记录，vue中过渡与动画的核心在于 transition 组件
transition 组件包裹的最外层元素必须出现以下四种控制属性之一才能执行过渡效果
- 条件渲染 (使用 v-if)
- 条件展示 (使用 v-show)
- 动态组件
- 组件根节点
1. transition 组件控制的三种常规过渡方式
第一种：自定义6种transition css类
过渡组件示例如下：
<template>
<div class='box'>
<button v-on:click="show = !show">
点击
</button>
// 这里的name='xx'与style中的6种类的统一前缀要一样,这里为fade
<transition name="fade">
<p v-if="show">hello</p>
</transition>
</div>
</template>
<script>
export default {
data() {
return {
show: true
};
},
};
</script>
<style lang="scss">
.box {
// 对应六种类，统一前缀为fade，因此transition的name = 'fade'，建议编写类命时同时编写这六种对应的类命，哪怕状态是一样的也行，而不是忽略某个状态类命
// 前三种、后三种分别对应show为true和false时的变化
// 前三种为进入时的状态类。
.fade-enter{
opacity: 0;
}
.fade-enter-active {
transition: opacity .5s;
}
.fade-enter-to{
transition: opacity .5s;
}
// 后三种为离开时的状态类
.fade-leave{
transition: opacity .5s;
}
.fade-leave-active {
transition: opacity .5s;
}
.fade-leave-to {
opacity: 0;
}
}
</style>
但凡被transition包裹的内容在进行渲染的时候都会触发一个完整的渲染状态变化过程，这个变化过程的官方解释是：
- 自动嗅探目标元素是否应用了 CSS 过渡或动画，如果是，在恰当的时机添加/删除 CSS 类名。
- 如果过渡组件提供了 JavaScript 钩子函数，这些钩子函数将在恰当的时机被调用。
- 如果没有找到 JavaScript 钩子并且也没有检测到 CSS 过渡/动画，DOM 操作 (插入/删除)在下一帧中立即执行。(注意：此指浏览器逐帧动画机制，和 Vue 的 nextTick 概念不同)
官方对6种过度类的解释：
第二种：使用transition的6种类名属性
<transition
enter-class = ""
enter-active-class = ""
enter-to-class = ""
leave-class = ""
leave-active-class = ""
leave-to-class = ""
>
<!-- ... -->
</transition>
使用transition的6种与类对应的样式属性可以进行自定义类。原理是一样的，但是这种做法将更加的适合于样式库搭配，如 Animate.css
代码示例：
1.在 index.html中引入animate.css
<link href="https://cdn.jsdelivr.net/npm/[email protected]" rel="stylesheet" type="text/css">
2.在需要使用动画效果的组件中使用transition包裹并且设置对应的类命
<template>
<div class='box'>
<button @click="show = !show">
Toggle render
</button>
<transition
enter-class = ""
enter-active-class="animated bounceInRight"
enter-to-class = ""
leave-class = ""
leave-active-class="animated bounceOutRight"
leave-to-class = ""
>
<p v-if="show">hello</p>
</transition>
</div>
</template>
注：
1.使用animate.css的时候类名之前必须要加上animated这个类名，如：enter-active-class=“animated bounceInRight”。
2.animate.css类的各种效果地址：https://www.dowebok.com/demo/2014/98/
3.建议在transition中同时使用这6个属性，哪怕类名为空也行
4.同时使用过渡以及动画造成的冲突可以参考官网：
https://cn.vuejs.org/v2/guide/transitions.html#同时使用过渡和动画
5.使用css动画和css过渡的使用方式大致是一样的。
css动画示例：
<template>
<div class='box'>
<button v-on:click="show = !show">
点击动画效果
</button>
// 这里的name='xx'与style中的6种类的统一前缀要一样,这里为bounce
<transition name="bounce">
<p v-if="show">hello</p>
</transition>
</div>
</template>
<script>
export default {
data() {
return {
show: true
};
},
};
</script>
<style lang="scss">
.box {
// 对应六种类，统一前缀为bounce，因此transition的name = 'bounce'，建议编写类命时同时编写这六种对应的类命，哪怕状态是一样的也行，而不是忽略某个状态类命
// 前三种、后三种分别对应show为true和false时的变化
// 前三种为进入时的状态类。
.bounce-enter{
}
.bounce-enter-active {
animation: bounce-in .5s;
}
.bounce-enter-to{
}
// 后三种为离开时的状态类
.bounce-leave{
}
.bounce-leave-active {
animation: bounce-out .5s;
}
.bounce-leave-to {
}
@keyframes bounce-in {
0% {
transform: scale(0);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}
@keyframes bounce-out {
0% {
transform: scale(1);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(0);
}
}
}
</style>
第三种：使用transition的8种方法钩子
<template>
<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>
</template>
<script>
export default {
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) {
}
}
};
</script>
通过这种方式可以对动画的整个过程的各个阶段实现完整的js控制效果，例如：配合Velocity.js使用
官方示例：https://cn.vuejs.org/v2/guide/transitions.html#JavaScript-钩子
transition 组件初始渲染的过渡
顾名思义就是内容第一次渲染的时候的过渡效果，通常情况下只需直接在transiton上面加个appear 属性即可。当然也可以自定义appear类或者appear事件
<transition
appear
name='xxx'
>
<!-- ... -->
</transition>
transition 过渡模式
两个或多个同级组件或者元素切换的时候将会出现动画过渡的时效性问题，而过渡模式则是解决这个问题的一种方式。
<transition name="fade" mode="out-in">
<!-- ... the buttons ... -->
</transition>
官方解释如下：
2.transition-group 组件控制列表过渡
对于一个列表的动画效果，vue提供了 transition-group 这个组件来控制列表相关的过渡效果，平常用的不太多，仅在针对性列表内容使用。在需要的时候找下官网api即可。
https://cn.vuejs.org/v2/guide/transitions.html#列表过渡
3.状态过渡
状态过渡针对于数据元素本身的动效。即数据变化的过渡。比如：
- 数字和运算（数字从0自增到指定数的动画效果）
- 颜色的显示
- SVG 节点的位置
- 元素的大小和其他的 property
这些数据要么本身就以数值形式存储，要么可以转换为数值。有了这些数值后，我们就可以结合 Vue 的响应式和组件系统，使用第三方库来实现切换元素的过渡状态。
状态过渡在平常的开发中用的还是比较少，而官方的例子也比较的充实，因此在需要的时候查查api即可。
https://cn.vuejs.org/v2/guide/transitioning-state.html