<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="vue.js"></script>
<style type="text/css">
/*enter-active和leave-active是进入/离开的两个大阶段*/
.fade-enter-active, .fade-leave-active {
/*设置过度效果的名称为opacity 时间为0.5秒*/
transition:opacity .5s
}
.fade-enter, .fade-leave-to {
opacity:0
}
/*结论：在2个大阶段内设置过度效果，enter enter-to leave leave-to 设置过度的样式*/
</style>
</head>
<body>
<div id="demo">
<button v-on:click="show = !show">
Toggle
</button>
<transition name="fade">
<p v-if="show">Hello</p>
</transition>
</div>
<script>
new Vue({
el:‘#demo‘,
data:{
show:true
}
})
</script>
</body>
原文：http://www.cnblogs.com/ItIsInteresting/p/7750445.html