我們給transition name屬性定義的是fade 所以是下面名稱：
fade-enter fade-enter-to fade-enter-active
fade-leave fade-leave-to fade-leave-active
如果我們沒有給transition定義name屬性，用默認的那么就是：
v-enter v-enter-to v-enter-active
v-leave v-leave-to v-leave-active
剛開始存在fade-enter和fade-enter-active
緊接第二幀的時候，fade-enter消失、fade-enter-to 出現(xiàn)
到最后的時候fade-enter-to消失在抛、fade-enter-active消失
剛開始存在fade-leave和fade-leave-active
緊接第二幀的時候锨咙，fade-leave消失痕囱、fade-leave-to 出現(xiàn)
到最后的時候fade-leave-to消失寥殖、fade-leave-active消失
//css動畫效果（css過度動畫效果）
<style>
.fade-enter {
opacity: 0;
}
.fade-enter-active {
transition: opacity 1s;
}
.fade-leave-to {
opacity: 0;
}
.fade-leave-active{
transition: opacity 1s;
}
</style>
<div id="root">
<transition name="fade">
<div v-if="show">hello world</div>
</transition>
<button @click="handleClick">toggle</button>
</div>
<script>
var app = new Vue({
el: '#root',
data: {
show: true
},
methods: {
handleClick: function () {
this.show = !this.show;
}
}
})
</script>
ps:
顯示操作
剛開始fade-enter opacity為0 第二幀fade-enter消失 opacity變?yōu)? 這個過程一直在fade-enter-active 監(jiān)聽1秒時間
隱藏操作
剛開始fade-leave opacity 默認是1 第二幀 fade-leave消失 fade-leave-to出現(xiàn) opacity 變?yōu)? 這個過程一直在fade-leave-active監(jiān)聽1秒時間后消失
更多
上一篇：第5章 Vue 表單
下一篇：第7章 Vue 路由
全篇文章：Vue學習總結(jié)
所有章節(jié)目錄：Vue學習目錄
