Vue-transition組件的Css動畫+過渡（1）入門，筆記總結 “建議收藏”
Vue 提供了?transition?的封裝組件
v-if和v-show可以控制組件的顯示和隱藏，動畫就添加在顯示和隱藏的過程中
一、1.（入門）這里引用vue官網大大一個例子
hello
這是所有過渡類名
v-enter-active：進入過渡生效時的狀態,整個進入過渡的階段中應用,這個類可以用來定義進入過渡的時間
v-leave-active：定義離開過渡生效時的狀態，作用同上，一個是進來一個是離開
v-enter：在元素被插入之前生效(插入過程中)，在元素被插入之后的下一幀移除。
v-leave-to：定義結束時的過渡(插入完成之后)，在過渡/動畫完成之后移除。
v-enter-to：定義進入過渡的結束狀態。在元素被插入之后下一幀生效 (與此同時?v-enter?被移除)，在過渡/動畫完成之后移除。
v-leave：定義離開過渡的開始狀態。在離開過渡被觸發時立刻生效，下一幀被移除。
2.（過渡） 以上是基礎用法，下面把css樣式換一下讓過渡更炫酷
這里說一下transition:?property duration timing-function delay;?一共有四個參數可選；
這是一個從右側滑出滑入同時淡入淡出的效果
.fade-enter-active { transition: all .3s ease; } .fade-leave-active { transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0); /*cubic-bezier() 函數定義了一個貝塞爾曲線(Cubic Bezier)。 數字越大越快 1.控制末尾快慢（更平緩） 2.控制開頭快慢（更急） 3.控制結尾快慢（更急） 4.控制開頭快慢（更平緩）*/ } .fade-enter, .fade-leave-to{ transform: translateX(10px); opacity: 0; }
3.（動畫）這里也是只改css動畫樣式
先說下animation的參數作用
這是一個放大再還原的回彈動畫
.fade-enter-active { animation: bounce-in .5s; } .fade-leave-active { animation: bounce-in .5s reverse;//reverse反向播放 } @keyframes bounce-in { 0% { transform: scale(0);/*初始0看不到*/ } 50% { transform: scale(1.5);/*放大*/ } 100% { transform: scale(1);/*還原*/ } }
二、自定義過渡的類名
有以下幾個，作用跟上面對應的差不多，就是優先級高于普通的類名，主要結合Vue 的過渡系統和其他第三方 CSS 動畫庫
enter-class
enter-active-class
enter-to-class
leave-class
leave-active-class
leave-to-class
//引用的第三方 CSS 動畫庫Animate.css
hello
三、定義過渡持續時間
最后也可以在 attribute（屬性中） 中聲明 JavaScript 鉤子，具體點擊查看文檔
以上就是動畫的基本用法，日常運用vue動畫是沒問題的，下面就是進階的，有興趣的同學可以繼續關注哦，我會持續更新！！
CSS Vue
版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。
版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。
相關文章
