大家好，我是VHotDog，热狗得小舔狗！
目录
最近看一个项目源码时，竟然发现这一篇我竟然没有看，竟然不知道，不知道！！！
然后我就去官网康了一下。他是这亚子说的
概述
Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。包括以下工具：
在 CSS 过渡和动画中自动应用 class
可以配合使用第三方 CSS 动画库，如 Animate.css
在过渡钩子函数中使用 JavaScript 直接操作 DOM
可以配合使用第三方 JavaScript 动画库，如 Velocity.js
过渡效果大家都晓得吧。
CSS3中，我们为了添加某种效果可以从一种样式转变到另一个的时候，无需使用Flash动画或JavaScript。
css3过渡简写属性：transition: 用于过渡的属性 时间 速度变化效果 延迟时间;
不过呢，嘿嘿。Vue帮我们封装好了！！
过渡
Vue 提供了 transition 的封装组件，在下列情形中，可以给任何元素和组件添加进入/离开过渡.
条件渲染 (使用 v-if)
条件展示 (使用 v-show)
动态组件
组件根节点
<!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="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<style>
.dog-enter-active, .dog-leave-active { // vue提供的过度类名。下面会讲
transition: opacity .5s;
}
.dog-enter, .dog-leave-to {
opacity: 0;
}
</style>
<body>
<div id ="app">
<button v-on:click="show = !show"> // 点击时，show值会true false变换
按钮
</button>
<transition name="dog"> // 自己定义的名称哦
<p v-if="show">hello vue</p>
</transition>
</div>
</body>
<script>
//创建Vue实例,得到 ViewModel
let vm = new Vue({
el: '#app',
data: {
show: true
},
methods: {}
});
</script>
</html>
可以实现点击”按钮“时，下面文字(hello vue)'淡入淡出’的效果。
过渡类名
在进入/离开的过渡中，会有 6 个 class 切换。(下面的v是默认的前缀)
opacity(透明度)
1.v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。
2.v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。
3. v-enter-to：2.1.8 版及以上定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。
4. v-leave：定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。
5. v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。
6. v-leave-to：2.1.8 版及以上定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。
如果你使用一个没有名字的 ，则 v- 是这些类名的默认前缀。如果你使用了 ，那么 v-enter 会替换为 dog-enter。
动画
动画和过渡的用法相同，区别是在动画中 v-enter 类名在节点插入 DOM 后不会立即删除，而是在 animationend 事件触发时删除。
css3动画简写属性：animation 绑定的keyframe名 花费时间 速度变化效果 延迟 播放次数 是否反向;
<!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="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<style>
.dog-enter-active {
animation: move .5s;
}
.dog-leave-active {
animation: move .5s reverse;
}
@keyframes move {
0% {
transform: scale(0);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
</style>
<body>
<div id ="app">
<button @click="show = !show">按钮</button>
<transition name="dog">
<p v-if="show">字数长一点，效果更好哦！！</p>
</transition>
</div>
</body>
<script>
//创建Vue实例,得到 ViewModel
let vm = new Vue({
el: '#app',
data: {
show: true
},
methods: {}
});
</script>
</html>
貌似有点生命周期那个味了呀。
transition属性介绍
name
用于自动生成 CSS 过渡类名。例如：name: dog将自动拓展为 .dog-enter ，.dog-enter-active等。默认类名为 “v”
appear
是否在初始渲染时使用过渡。默认为 false。
css
是否使用 CSS 过渡类。默认为 true。如果设置为 false，将只通过组件事件触发注册的 JavaScript 钩子。
type
指定过渡事件类型，侦听过渡何时结束。有效值为 “transition” 和 “animation”。默认 Vue.js 将自动检测出持续时间长的为过渡事件类型。
mode
控制离开/进入的过渡时间序列。有效的模式有 “out-in” 和 “in-out”；默认同时生效。
duration
指定过渡的持续时间。
可以用 组件上的 duration 属性定制一个显性的过渡持续时间 (以毫秒计)：
<transition :duration="1000">...</transition>
也可以定制进入和移出的持续时间：
<transition :duration="{ enter: 500, leave: 800 }">...</transition>
注意
同时使用过渡和动画时，需要使用 type 特性并设置 animation 或 transition 来明确声明你需要 Vue 监听的类型。
因为浏览器并不知道使用的是animate的时长，还是transition的时长。假如整体使用transition的时长
<transition name="dog" type='transition'">...</transition>