Vue 动画 过度效果（渐隐渐现）

首先一个toggle 效果：

	<div id="root">
		<div v-if="show">hello world</div>
		<button @click="handleClick">切换</button>
	</div>
	<script>
		var vm = new Vue({
			el: "#root",
			data: {
				show: true
			},
			methods: {
				handleClick: function(){
					this.show = !this.show;
				}
			}

		})
	</script>

然后呢，想让显示和隐藏的过程有一个渐隐渐现的效果：

首先需要加一个transition 标签，该标签表示，它包裹的内容有一个过度的动画效果.

当元素被transition 标签包裹后， Vue 会自动分析元素的CSS 样式，然后构建一个动画的流程。

如下图，当元素是从隐藏状态到显示状态：

上图，下半部分，那条线与点们就是上述的动画的流程。当动画即将执行的时候，Vue 会往内部的元素中增加两个class （fade-enter,fade-enter-active）；当执行完第一帧后，执行到第二帧时，Vue 会删除掉 fade-enter 的class，同时，增加fade-enter-to 的class；接着动画继续执行，直到结束的瞬间，Vue 会把fade-enter-active 与 fade-enter-to 两个class 去除掉。

如下，渐现效果，其中，因为 transition 的name 为 fade ，因此样式名为 fade-enter ... 若不给transition 命名，则使用 v-enter... 即可。（transition： opacity 1s; 是指监测到opacity有变化将变化时间延长到1s）

	<style>
		.fade-enter{
			opacity: 0;
		}
		.fade-enter-active{
			transition: opacity 1s;
		}
	</style>
</head>
<body>
	<div id="root">
		<transition name="fade">
			<div v-if="show">hello world</div>
		</transition>
		<button @click="handleClick">切换</button>
	</div>
	<script>
		var vm = new Vue({
			el: "#root",
			data: {
				show: true
			},
			methods: {
				handleClick: function(){
					this.show = !this.show;
				}
			}

		})
	</script>

 

当元素是从显示状态到隐藏状态：

如下代码，加入了渐隐的效果：

	<style>
		.fade-enter{
			opacity: 0;
		}
		.fade-enter-active{
			transition: opacity 3s;
		}
		.fade-leave-to{
			opacity: 0;
		}
		.fade-leave-active{
			transition: opacity 3s;
		}
	</style>
</head>
<body>
	<div id="root">
		<transition name="fade">
			<div v-if="show">hello world</div>
		</transition>
		<button @click="handleClick">切换</button>
	</div>
	<script>
		var vm = new Vue({
			el: "#root",
			data: {
				show: true
			},
			methods: {
				handleClick: function(){
					this.show = !this.show;
				}
			}

		})
	</script>