Vue动画
业务场景的动画通过手写css实现更加方便，细节可控
但一些页面常见动画，通过Vue提供的动画能力能以更通用、更快速方式实现
Transiton
官方文档说明
当一个 <Transition> 组件中的元素被插入或移除时，会发生下面这些事情：
-
Vue 会自动检测目标元素是否应用了 CSS 过渡或动画。如果是，则一些 CSS 过渡 class 会在适当的时机被添加和移除。
-
如果有作为监听器的 JavaScript 钩子，这些钩子函数会在适当时机被调用。
-
如果没有探测到 CSS 过渡或动画、也没有提供 JavaScript 钩子，那么 DOM 的插入、删除操作将在浏览器的下一个动画帧后执行。
CSS过渡动画
css中过渡类动画，通过2个条件实现：
-
可过渡的状态改变
-
过渡效果（时间、速度）
vue通过固定时机增删 *-enter/leave-from/to 类实现状态改变，以及 *-enter/leave-from/to 类设置过渡效果，呈现出最终过渡动画
相关类
v-enter-from 元素插入前添加，元素插入后移除
v-enter-to 元素插入后添加，进入动画结束后移除
v-enter-active 元素插入前添加，元素插入后移除，贯穿整个进入动画
v-leave-from 元素离开动画前添加，元素离开动画开始移除
v-leave-to 元素离开动画开始添加，元素离开动画结束移除
v-leave-active 元素离开动画前添加，元素离开动画结束移除（下一帧元素将被移除）
animation动画
利用 Transition 添加 v-enter/leave-active 动画类，编写 animation 动画
.bounce-enter-active {
animation: bounce-in 0.5s;
}
.bounce-leave-active {
animation: bounce-in 0.5s reverse;
}
@keyframes bounce-in {
0% {
transform: scale(0);
}
50% {
transform: scale(1.25);
}
100% {
transform: scale(1);
}
}
Props
name
指定动画名称以设置动画类前缀，默认动画类前缀为 v-*
animation
显式指定动画的监听类型（transitionend/animationend）
<Transition type="animation">...</Transition>
duration
显式指定动画的持续时间（默认为transiton/animation时间）
<Transition :duration="500">...</Transition>
mode
如果多个组件同时进入/退出动画，你需要设置 position: absolute 避免同时存在问题（Vue动画对元素插入/移除与动画间隔一帧）
通过设置动画模式（mode）设置进入和离开的顺序
<Transition mode="out-in">
// 先离开后进入
</Transition>
使用
封装动画
<template>
<Transition
name="my-transition"
@enter="onEnter"
@leave="onLeave">
<slot></slot>
</Transition>
</template>
<style>
/*
必要的 CSS...
注意：避免在这里使用 <style scoped>
因为那不会应用到插槽内容上
*/
</style>
初次渲染时动画
<Transition appear>
...
</Transition>
动画库使用
Animate.css
<!-- 假设你已经在页面中引入了 Animate.css -->
<Transition
name="custom-classes"
enter-active-class="animate__animated animate__tada"
leave-active-class="animate__animated animate__bounceOutRight"
>
<p v-if="show">hello</p>
</Transition>
JavaScript钩子
| 详见 [Transition | Vue.js](https://cn.vuejs.org/guide/built-ins/transition.html#javascript-hooks) |
