Vue动画 - web前端 | MrNobody = MrNobody's Blog = 保持呼吸不要断气

当 vue 中，显示隐藏，创建移除，一个元素或者一个组件的时候，可以通过 transition 实现动画。

进入（显示，创建）
- v-enter-from 初始状态（vue2.0 v-enter）
- v-enter-active 进行中
- v-enter-to 结束状态
离开（隐藏，移除）
- v-leave-from 初始状态（vue2.0 v-leave）
- v-leave-active 进行中
- v-leave-to 结束状态

# 案例：

	<button @click="show=true">显示\|创建</button>
	<button @click="show=false">隐藏\|移除</button>

	<transition>
	<div v-show="show" style="width: 100px;height: 100px;background-color:red;"></div>
	</transition>

	.v-enter-from {
	opacity: 0;
	}

	.v-enter-active {
	transition: all 1s;
	}

	.v-enter-to {
	opacity: 1;
	}

	.v-leave-from {
	opacity: 1;
	}

	.v-leave-active {
	transition: all 1s;
	}

	.v-leave-to {
	opacity: 0;
	}

# 注意

transition 只能包一个标签或者一个组件。
动画名称 name="v" 为默认值，可以把修改成其他名字，可用于多个 transition 使用不同动画

# 案例

	<transition name="demo">
	<div></div>
	</transition>

	.demo-enter-from {
	opacity: 0;
	}

	.demo-enter-active {
	transition: all 1s;
	}

	.demo-enter-to {
	opacity: 1;
	}