vue -- 过渡 & 动画
vue中需要过渡或者动画的元素，组件需要通过vue的tansition外层标签包裹起来，否则没有效果
一、过渡
HTML
SRE实战 互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。<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 的 元素时，会默认前缀为 v-。
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、过渡效果解析
过渡进入
name-enter表示组件准备开始进入过渡状态，在这一步可以定义过渡组件进入初始效果，是一个瞬间状态
name-enter-active表示组件进入过渡状态激活，贯穿从准备进入到进入结束整个过渡进入时期，是一个时间段
name-enter-to表示组件进入的结束过渡状态，在这一步可以定义过渡组件结束效果，是一个瞬间状态
过渡结束
name-leave表示组件开始离开过渡状态，在这一步可以定义过渡组件离开初始效果，是一个瞬间状态
name-leave-active表示组件离开过渡状态激活，贯穿从准备离开到离开结束整个过渡离开时期，是一个时间段
name-leave-to表示组件离开的结束过渡状态，在这一步可以定义过渡组件离开的结束效果，是一个瞬间状态
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、多元素过渡
给 组件中的多个元素设置 key，被认为是一个最佳实践
建议给transition标签中的多个元素添加过渡效果时，可以采用三元表达式结合计算属性来实现
这个暂时没弄清楚？
3、过渡模式
mode="out-in
mode="in-lout `
四、多组件过渡
<transition name="slide">
<component v-on:is="home"></component>
</transition>
