首先一个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>