文章目錄
- 1.vue的css動畫的使用步驟是什麼?
- 2.vue的css動畫原理是什麼?
- 顯示流程:
- 隐藏流程
1.vue的css動畫的使用步驟是什麼?
以元素過渡隐藏和顯示為例，css使用步驟下圖
這樣就可顯示動畫了。
2.vue的css動畫原理是什麼?
答： 當一個元素
被transition包裹
之後，vue會
自動的分析元素的css樣式
，然後
建構一個動畫的流程
。
流程分2塊，一塊是元素顯示的流程，一塊是元素隐藏的流程。
顯示流程:
- 顯示動畫執行的瞬間，會在第一幀增加2個屬性的名字： fade-enter和fade-enter-active。
- 當第一幀執行過後，vue會把之前添加的fade-enter這個class去掉，然後再增加一個fade-enter-to這樣一個class的名字，接着動畫繼續執行。
- 執行的結束的這一瞬間，vue會吧fade-enter-active和fade-enter-to這2個class屬性移除除掉。
那麼我們通過自定義vue的這幾個css樣式，就可以實作我們想要的效果了。
代碼示範如下:
這樣，div在顯示的時候就有過渡的效果啦。
注意:
所有的樣式都以fade開頭是因為:
隐藏流程
- 隐藏動畫執行的瞬間，會在第一幀增加2個屬性的名字： fade-leave和fade-leave-active。
- 當第一幀執行過後，vue會把之前添加的fade-leave這個class去掉，然後再增加一個fade-leave-to這樣一個class的名字，接着動畫繼續執行。
- 執行的結束的這一瞬間，vue會吧fade-leave-active和fade-leave-to這2個class屬性移除除掉。
代碼示例如下:
顯示流程和隐藏流程合起來寫就是如下的代碼:
另外，vue的css動畫效果，也叫vue的過渡動畫效果。
開通了個微信公衆号：
搜尋： 怒放de每一天
後續可能不定時推送相關文章，期待和大家一起成長！！