一、过渡

使用 transition 标签 或 transition-group 标签包裹 被附加过渡动画的标签

被transition 包裹的节点只能有一个根节点

被transition-group 包裹的节点个数随意，但是每个节点需要添加 :key属性

transition 和 transition-group 标签中的name属性用于区别各个不同动画模块 也是 css 中class的前缀；appear属性用于指定初次加载时便就执行过渡

若不设置name属性默认为 v
例如

<transition name="hello" :appear="true">
	<h1 v-show="isShow">你好啊！</h1>
</transition>
<transition-group name="hello" appear>
	<h1 :key="1" v-show="isShow">你好啊！</h1>
	<h1 :key="2" v-show="!isShow">hello Word！</h1>
</transition-group>

h1{
	background-color: #96CBFE;
}
/* 进入的起点 离开的终点 */
.hello-enter, .hello-leave-to{
	transform: translateX(-100%)
}
/* 进入的终点 离开的起点 */
.hello-enter-to, .hello-leave{
	transform: translateX(0px)
}
.hello-enter-active, .hello-leave-active{
	transition: 1s linear
}

v-enter ：载入起点

v-enter-to ：载入终点

v-enter-active ：载入全程（可再此设置时间等）

v-leave ：移出起点

v-leave-to ：移出终点

v-leave-active ：移出全程（可再此设置时间等）

二、动画

CSS 动画用法同 CSS 过渡，区别是在动画中 v-enter 类名在节点插入 DOM 后不会立即删除，而是在 animationend 事件触发时删除。

<transition name="hello" :appear="true">
	<h1 v-show="isShow">你好啊！</h1>
</transition>

h1{
	background-color: #96CBFE;
}
.hello-enter-active{
	animation: atguigu 1s linear;
}
.hello-leave-active{
	animation: atguigu 1s reverse;
}
@keyframes atguigu {
	from{
		transform: translateX(-100%);
	}
	to{
		transform: translateX(0px);
	}
}

推荐一个过渡动画样式库：https://animate.style/
引入 css库 import ‘animate.css’