99热在线精品一区二区三区_国产伦精品一区二区三区女破破_亚洲一区二区三区无码_精品国产欧美日韩另类一区

小編給大家分享一下vue如何操作動畫，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

創(chuàng)新互聯(lián)是一家專業(yè)提供陵城企業(yè)網(wǎng)站建設(shè),專注與成都網(wǎng)站建設(shè)、做網(wǎng)站、html5、小程序制作等業(yè)務(wù)。10年已為陵城眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站建設(shè)公司優(yōu)惠進(jìn)行中。

transition動畫

//使用動畫庫animate.css

//其中duration是綁定動畫的時間 統(tǒng)一設(shè)置進(jìn)入與出去的時間
這里是動畫的內(nèi)容

//也可以這樣使用

//其中duration是綁定動畫的時間
這里是動畫的內(nèi)容

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

//其中duration是綁定動畫的時間
這里是動畫的內(nèi)容

var vm=new Vue({
  el:'#app',
 data:{
  return {
  flag:false
  }
 },
 methods:{
 //注意:動畫鉤子函數(shù)的第一個參數(shù):el,表示要執(zhí)行動畫的那個dom元素,是個原生的js dom對象
 beforeEnter(el){
   //這個是表示動畫入場之前,此時,動畫尚未開始,可以在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
 }
 }
 
})

以上是“vue如何操作動畫”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

當(dāng)前標(biāo)題：vue如何操作動畫
當(dāng)前網(wǎng)址：http://ef60e0e.cn/article/gdjccd.html