在插入、更新或移除 DOM元素时，在合适的时候给元素添加样式类名。
?
使用
<transition>包裹要过度的元素，并配置name属性。若有多个元素需要过度，则需要使用：
<transition-group>，且每个元素都要指定key值。:appear="true" 等同于 appear?，代表页面一加载动画就执行一次。
效果展示一：
知识点回顾
动画
通过 @keyframes 定义动画
在指定元素?，通过 animation 属性调?动画
?定义动画
@keyframes 定义动画关键帧，写法：
- 百分比 0% 是动画的开始时间，100% 动画的结束时间
- 关键词 "from" 和 "to"，等价于 0% 和 100%
/* 动画名不要使? none 这样的关键字 */? @keyframes 动画名{ ? ? from{ 初始帧 }? ? ? to{ 结束帧 }? } ? @keyframes mymove { ? ? 0% {top:0px; background:red; width:100px;} ? ? 100% {top:200px; background:yellow; width:300px;} }调用动画（animation 属性的用法）
animation: 定义的动画名称 动画完成时间(从开始帧到结束帧?次动画完成的时间) 运动曲线 延迟执? 执?次数(infinite 表示?限次) 是否反向
animation-name 定义的动画名称（必填）
animation-duration 多长时间才能完成动画（必填）
animation-timing-function 动画的速度曲线
- ease 指定从慢速开始，然后加快，然后缓慢结束的动画（默认）
- linear 规定从开始到结束的速度相同的动画
- ease-in 规定慢速开始的动画
- ease-out 规定慢速结束的动画
- ease-in-out 指定开始和结束较慢的动画
- cubic-bezier(n,n,n,n) 运行您在三次贝塞尔函数中定义自己的值
animation-delay 动画开始的延迟时间，负值也是允许的。如果使用负值，则动画将开始播放，如同已播放 N 秒
- 可以通过帧控制，实现延迟。但每次动画都会有延迟，animation-delay 只体现在第?次动画开始时
animation-iteration-count 设置动画应运行多少次
animation-direction 向前播放、向后播放还是交替播放动画
- normal 动画正常播放（向前 默认值）
- reverse 动画以反方向播放（向后）
- alternate 动画先向前播放，然后向后
- alternate-reverse 动画先向后播放，然后向前
- alternate 也会计算执?次数
animation: myfirst 5s linear 0s infinite alternate;
animation-fill-mode 动画开始结束时盒?的状态
- none (默认值) 在运动结束之后回到初始位置，在延迟的情况下，让0%在延迟后?效
- forwards 在运动结束的之后，停到结束位置
- backwards 在延迟的情况下，让 0% 在延迟前?效
- both backwards和forwards同时?效
animation-play-state 设置动画正在运行还是暂停
- paused 动画已暂停
- running 动画正在播放
代码实现（test.vue）
<template>
<div>
<button @click="isShow=!isShow">显示/隐藏</button>
<!--使用<transition>包裹要过度的元素，并配置name属性-->
<transition name="hello" appear>
<h1 v-show="isShow">你好啊</h1>
</transition>
</div>
</template>
<script>
export default {
name:'Test',
data(){
return{
isShow:true
}
}
}
</script>
<style>
h1{
background-color: orange;
}
.hello-enter-active{
animation: atguigu 0.5s linear;
}
.hello-leave-active{
animation: atguigu 0.5s linear reverse;
}
@keyframes atguigu{
from{
transform: translateX(-100%);
}
to{
transform: translateX(0px);
}
}
</style>效果展示二：（与效果展示一一样的效果，只不过这个是两个都有动画效果）
知识点回顾
元素进入的样式
v-enter：进入的起点
v-enter-active：进入过程中
v-enter-to：进入的终点
元素离开的样式
v-leave：离开的起点
v-leave-active：离开过程中
v-leave-to：离开的终点
代码实现（test2.vue）
<template>
<div>
<button @click="isShow=!isShow">显示/隐藏</button>
<!--若有多个元素需要过度，则需要使用：<transition-group>，且每个元素都要指定key值-->
<transition-group name="atguigu" appear>
<h1 v-show="isShow" key="1">你好啊！！</h1>
<h1 v-show="isShow" key="2">尚硅谷</h1>
</transition-group>
</div>
</template>
<script>
export default {
name:'Test2',
data(){
return{
isShow:true
}
}
}
</script>
<style>
h1{
background-color: orange;
/* transition: 0.5s linear; */
}
/* 进入的起点，离开的终点 */
.atguigu-enter,.atguigu-leave-to{
transform: translateX(-100%);
}
.atguigu-enter-active,.atguigu-leave-active{
transition: 0.5s linear;
}
/* 进入的终点,离开的起点 */
.atguigu-enter-to，.atguigu-leave{
transform: translateX(0px);
}
</style>效果展示三：
?知识点回顾
Animate.css 基本使用
- 安装 npm install animate.css
- 引用 import 'animate.css'
第三方库网址：Animate.css | A cross-browser library of CSS animations.?
注意：引入的时候注意前缀animate__ ；其中那些类名都是去网站上复制粘贴上就能用的
代码实现（test3.vue）
<template>
<div>
<button @click="isShow=!isShow">显示/隐藏</button>
<!-- 在需要使用Animate.css，引入，注意前缀animate__ -->
<transition-group
name="animate__animated animate__bounce"
appear
enter-active-class="animate__swing"
leave-active-class="animate__backOutUp"
>
<h1 v-show="isShow" key="1">你好啊！！</h1>
<h1 v-show="isShow" key="2">尚硅谷</h1>
</transition-group>
</div>
</template>
<script>
//引入
import 'animate.css'
export default {
name:'Test3',
data(){
return{
isShow:true
}
}
}
</script>
<style>
h1{
background-color: orange;
}
</style>