methods cli css樣式 第一個 內部 -c 顯示 opacity enter

顯示原理：

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

當一個元素被transition包裹了之後，vue會自動當分析元素的css樣式，然後構建一個動畫的流程，在動畫即將被執行的一瞬間，vue會在內部標簽上增加兩個class名字，分別是fade-enter,fade-enter-active,在動畫執行到第二幀的時候，也就是動畫開始後，fade-enter會變成fade-enter-to,動畫執行到最後到時候，vue會幹一件事情，把之前添加到fade-enter-to,fade-enter-active這兩個class去除掉

<
 
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>

在第0s的時候樣式由fade-enter控制，透明度為0,當第二幀的時候，透明度在3s內由0到1過度，如果transition的name不寫，默認樣式是v-enter, v-enter-active

隱藏原理 當一個元素被transition包裹了之後，元素由顯示到隱藏，是這樣一個流程，在隱藏的第一個瞬間，vue會給元素新增兩個class，fade-leave,fade-leave-active,在第二幀的時候，會把fade-leave去掉，更新為fade-leave-to，在最後的時候，會把fade-leave-to,fade-leave-active都去除掉

<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>

加上上面兩個class隱藏的效果就出來了，為什麽呢，從動畫開始到結束，fade-leave-active都存在，也就是在動畫運行的過程中，時刻監聽著這個opacity這個屬性，一旦opacity發生變化，就讓opacity在3s中慢慢的進行過度，在第一瞬間,也就是fade-leave的時候,opacity還是顯示的，為1

這種動畫效果，叫做過渡的動畫效果，也叫css動畫

vue中css動畫原理