這篇文章主要介紹了vue操作動畫的記錄animate.css的相關知識,非常不錯,具有一定的參考借鑑價值,需要的朋友可以參考下
transition動畫
//使用動畫庫animate.css <transition enter-active-class='animated bounceIn' leave-active-class='animated bounceOut' :duration='200'> //其中duration是綁定動畫的時間 統一設置進入與出去的時間 <h3 v-if='flag'>這裏是動畫的內容</h3> </transition > //也可以這樣使用 <transition enter-active-class='bounceIn' leave-active-class='bounceOut' :duration='{enter:200,leave:400}'> //其中duration是綁定動畫的時間 <h3 v-if='flag' class='animated'>這裏是動畫的內容</h3> </transition >
1.使用鉤子函數實現半場動畫 例如加入購物車時小球的動畫
<transition @before-enter='beforeEnter' @enter='enter' @after-enter='afterEnter'> //其中duration是綁定動畫的時間 <h3 v-if='flag' >這裏是動畫的內容</h3> </transition > var vm=new Vue({ el:'#app', data:{ return { flag:false } }, methods:{ //注意:動畫鉤子函數的第一個參數:el,表示要執行動畫的那個dom元素,是個原生的js dom對象 beforeEnter(el){ //這個是表示動畫入場之前,此時,動畫尚未開始,可以在beforeEnter中,設置元素開始之前的起 始樣式 //設置小球開始動畫之前的,起始位置. el.style.transform="translate(0,0)"; }, enter(el,done){ //強制重繪 刷新 el.offserWidth; //enter 表示動畫 開始之後的樣式,這裏,可以設置小球完成動畫之後,結束狀態 el.style.transform="translate(150px,450px)"; el.style.transition="all 1s linear"; //立即消失done()方法 ,其實就是afterEnter()函數的引用 //el.addEventListener('transitionend', done);監聽動畫完成後執行 done() }, afterEnter(el){ //動畫完成之後,會調用afterEnter this.flag=! this.flag } } })
總結
以上所述是小編給大家介紹的vue操作動畫的記錄animate.css實例代碼,希望對大家有所幫助,如果大家有任何疑問歡迎給我留言,小編會及時回覆大家的!