vue -- 过渡 & 动画
vue中需要过渡或者动画的元素，组件需要通过vue的tansition外层标签包裹起来，否则没有效果
一、过渡
HTML
<div id="app">
/* 控制动画 */
<button v-on:click="show = !show">Toggle</button>
/* 过渡内容 */
<transition name="fade">
<p v-if="show">hello</p>
</transition>
</div>
Tips
注意transition标签上的name属性，这个一定要有，这个算是指定过渡组件的一个前缀名，对于这些过渡中切换 class，每个都以过渡的 name 作为前缀。当你使用没有 name 的
JS
data: {show: true}
CSS
.fade-enter-active, .fade-leave-active {
transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active 在低于版本 2.1.8 中 */ {
opacity: 0;
}
1、过渡效果解析
过渡进入
之前的理解有问题，所以效果出不来，最近重新弄了一下， 发下，其实这个过渡是跟那个DOM的显示隐藏挂钩，也就意味着其实过渡的进入和离开是两个单独对应的过渡事件。
enter，leave，enter-to，leave-to都是用来写DOM的状态样式的
enter-active，leave-active里面是用来写DOM样式过渡的，比如过渡时间，过渡属性，过渡类型等等，如通过transition和animation的方式
name-enter这个表示show为true时的，DOM的初始状态
name-enter-active这个表示DOM过渡事件的过程以什么形式展示的，比如案例中就表示DOM在.5秒内容从透明度0到透明度1的过渡
name-enter-to这个表示DOM在show为true的情况下，最终状态
过渡结束
name-leave这个表示当我们点击DOM时，show从true转变为false时，DOM的初始状态，一般和DOM为true时的最终状态是一样，因此基本上这两个可以写成同一个
name-leave-active这个表示DOM过渡事件的过程以什么形式展示的，比如案例中就表示DOM在.5秒内容从透明度1到透明度0的过渡
name-leave-to这个表示show从true转变为false时，DOM过渡的最终状态，一般和DOM为true时的初始状态一样，因此基本上这两个可以写成同一个
2、CSS动画
CSS 动画用法和 CSS 过渡相同，区别是在动画中 v-enter 类名在元素插入 DOM 后不会立即删除，而是在 animationend 事件触发时删除
HTML
<button v-on:click="show = !show">动画</button>
<transition name="bounce">
<p v-if="show">动画效果</p>
</transition>
CSS
.bounce-enter-active {
animation: bounceT 3s;
}
.bounce-leave-active {
animation: bounceT 5s reverse;
}
@keyframes bounceT {
0% {
transform: scale(0)
}
50% {
transform: scale(2)
}
100% {
transform: scale(1)
}
}
不知道什么原因？难道是vue自动animate.css，点击没有缩放，变成了别的动画效果了
1、自定义过渡类名
enter-class
enter-active-class
enter-to-class (2.1.8+)
leave-class
leave-active-class
leave-to-class (2.1.8+)
这个方法将 Vue 的过渡系统和其他现有的第三方 CSS 动画库（如 Animate.css）集成使用会非常有用，我们可以将其他动画库的类名添加给自定义类名
看下官方的案例：
<transition
name="custom-classes-transition"
enter-active-class="animated tada"
leave-active-class="animated bounceOutRight"
>
<p v-if="show">hello</p>
</transition>
上面的animated是Animate.css动画库的初始class类名，后面则是不同动画效果的类名
三、JS钩子函数
<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里面写方法了，也可以结合CSS/过渡使用
Tips
1、当仅使用 JavaScript 式过渡的时候， 在 enter 和 leave 钩子函数中，必须有 done 回调函数。否则，这两个钩子函数会被同步调用，过渡会立即完成
2、推荐对于仅使用 JavaScript 的过渡显式添加 v-bind:css="false"，以便 Vue 可以跳过 CSS 侦测。这也可以防止 CSS 规则意外干涉到过渡
1、初始渲染过渡
指定自定义JS钩子函数
<transition
appear
v-on:before-appear="customBeforeAppearHook"
v-on:appear="customAppearHook"
v-on:after-appear="customAfterAppearHook"
v-on:appear-cancelled="customAppearCancelledHook"
>
<!-- ... -->
</transition>
2、多元素过渡
给
建议给transition标签中的多个元素添加过渡效果时，可以采用三元表达式结合计算属性来实现
这个暂时没弄清楚？
3、过渡模式
mode="out-in
mode="in-lout `
四、多组件过渡
<transition name="slide">
<component v-on:is="home"></component>
</transition>
