transition動畫

//使用動畫庫animate.css<transition enter-active-class='animated bounceIn' leave-active-class='animated bounceOut' :duration='200'>//其中duration是綁定動畫的時(shí)間 統(tǒng)一設(shè)置進(jìn)入與出去的時(shí)間<h3 v-if='flag'>這里是動畫的內(nèi)容</h3></transition >//也可以這樣使用<transition enter-active-class='bounceIn' leave-active-class='bounceOut' :duration='{enter:200,leave:400}'>//其中duration是綁定動畫的時(shí)間<h3 v-if='flag' class='animated'>這里是動畫的內(nèi)容</h3></transition >

1.使用鉤子函數(shù)實(shí)現(xiàn)半場動畫 例如加入購物車時(shí)小球的動畫

<transition @before-enter='beforeEnter' @enter='enter' @after-enter='afterEnter'>//其中duration是綁定動畫的時(shí)間<h3 v-if='flag' >這里是動畫的內(nèi)容</h3></transition >var vm=new Vue({  el:'#app', data:{  return {  flag:false  } }, methods:{ //注意:動畫鉤子函數(shù)的第一個(gè)參數(shù):el,表示要執(zhí)行動畫的那個(gè)dom元素,是個(gè)原生的js dom對象 beforeEnter(el){   //這個(gè)是表示動畫入場之前,此時(shí),動畫尚未開始,可以在beforeEnter中,設(shè)置元素開始之前的起  始樣式   //設(shè)置小球開始動畫之前的,起始位置.   el.style.transform="translate(0,0)";    }, enter(el,done){  //強(qiáng)制重繪 刷新  el.offserWidth;   //enter 表示動畫 開始之后的樣式,這里,可以設(shè)置小球完成動畫之后,結(jié)束狀態(tài)      el.style.transform="translate(150px,450px)";  el.style.transition="all 1s linear";  //立即消失done()方法 ,其實(shí)就是afterEnter()函數(shù)的引用  //el.addEventListener('transitionend', done);監(jiān)聽動畫完成后執(zhí)行  done()  }, afterEnter(el){ //動畫完成之后,會調(diào)用afterEnter   this.flag=! this.flag } } })

總結(jié)

以上所述是小編給大家介紹的vue操作動畫的記錄animate.css實(shí)例代碼，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時(shí)回復(fù)大家的！