vue中css动画原理

<transition name=‘fade‘>
　　<div v-if=‘show‘>hello world</div>
</transition>

<style>
.fade-enter{
　　opacity: 0;
}
.fade-enter-active{
　　transition: opacity 3s;
}
</style>
<div id=‘app‘>
　　<transition name=‘fade‘>
　　　　<div v-if=‘show‘>hello world</div>
　　</transition>
　　<button @click=‘handleClick‘>切换</button>
</div>


<script>
var vm = new Vue({
　　el:‘#app‘,
　　data:{
　　　　show:true
　　},
　　methods:{
　　　　handleClick:function(){
　　　　　　this.show = !this.show;
　　　　}
　　}
})
</script>

<style>
.v-enter{
　　opacity: 0;
}
.v-enter-active{
　　transition: opacity 3s;
}
.v-leave-to{
　　opacity: 0;
}
.v-leave-active{
　　transition: opacity 3s;
}
</style>
<div id=‘app‘>
　　<transition>
　　　　<div v-if=‘show‘>hello world</div>
　　</transition>
　　<button @click=‘handleClick‘>切换</button>
</div>


<script>
var vm = new Vue({
　　el:‘#app‘,
　　data:{
　　　　show:true
　　},
　　methods:{
　　　　handleClick:function(){
　　　　　　this.show = !this.show;
　　　　}
　　}
})
</script>