1，vue 动画
① 操作 css 的 trasition 或 animation
② vue 会给目标元素添加 / 移除特定的 class
③ 过渡的相关类名
xxx-enter-active：指定显示的 transition
xxx-leave-active：指定隐藏的 transition
xxx-enter / xxx-leave-to：指定隐藏时的样式
2，单元素/ 组件的过渡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.fade-enter-active,.fade-leave-active{
transition:opacity .5s;
}
.fade-enter,.fade-leave-to{
opacity:0
}
</style>
</head>
<body>
<div id="app">
<button @click="show=!show">Toggle</button>
<transition name="fade">
<p v-if="show">hello</p>
</transition>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
show:true
}
})
</script>
</body>
</html>
在进入 / 离开 的过渡中，会有6个 class 切换：
① v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。
② v-enter-active：定义进入过渡生效时的状态，在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡 / 动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。
③ v-enter-to：定义进入过渡的结束状态，在元素被插入之后下一帧生效（与此同时 v-enter 被移除) ，在过渡 / 动画 完成之后移除。
④ v-leave：定义离开过渡时的开始状态，在离开过渡被触发时立刻生效，下一帧被移除。
⑤ v-leave-active：定义离开过渡生效时的状态，在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡 / 动画完成之后移除，整个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。
⑥ v-leave-to：定义离开过渡的结束状态，在离开过渡被触发之后下一帧失效（与此同时 v-leave 被删除)，在过渡 / 动画完成之后移除。
3，css 过渡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.slide-fade-enter-active{
transition:all .3s ease;
}
.slide-fade-leave-active{
transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to{
transform: translateX(10px);
opacity: 0;
}
</style>
</head>
<body>
<div id="app">
<button @click="show=!show">Toggle render</button>
<transition name="slide-fade">
<p v-if="show">hello</p>
</transition>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
show:true
}
})
</script>
</body>
</html>
4，css 动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.bounce-enter-active {
animation: bounce-in .5s;
}
.bounce-leave-active {
animation: bounce-in .5s reverse;
}
@keyframes bounce-in {
0% {
transform: scale(0);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}
</style>
</head>
<body>
<div id="app">
<button @click="show=!show">Toggle show</button>
<transition name="bounce">
<p v-if="show">hello,world.</p>
</transition>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
show:true
}
})
</script>
</body>
</html>