【VUE_过渡与动画】

作用

在插入、更新或移除DOM元素时，在合适的时候给元素添加样式类名。

使用步骤

1、准备样式
1）元素进入的样式：

1. v-enter：开始入场
2. v-enter-active：入场过程
3. v-enter-to:：入场结束
   2）元素离开的样式
4. v-leave：开始离场
5. v-leave-active：离场过程
6. v-leave-to：结束离场
   2、使用标签包裹要过渡的元素，配置name属性：

<transition name="hello">
			<h1 v-show="isShow">你好~</h1>
</transition>

3、若有多个元素需要过渡，需要用，且元素制定Key

<transition-group appear name="hello">
			<h1 v-show="isShow" key="1">你好1~</h1>
			<h1 v-show="isShow" key="2">你好2~</h1>
		</transition-group>

例：

	/* 开始入场 */
	.hello-enter,.hello-leave-to{
	/* 
		.hello代表是div的name
		.hello-enter表动画开始入场
		.helli-leave-to表离开动画结束
	 */
		transform: translateX(-100%);
	}
	/* 入场过程 */
	.hello-enter-active,.hello-leave-active{
		transition: 0.5s linear;
	}
	/* 结束入场 */
	.hello-enter-to,.hello-leave{
		transform: translateX(0);
	}