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

成都創(chuàng)新互聯(lián)主要從事網(wǎng)站設(shè)計制作、網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)鹿邑,10多年網(wǎng)站建設(shè)經(jīng)驗,價格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):18982081108

transition動畫

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

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

<transition @before-enter='beforeEnter' @enter='enter' @after-enter='afterEnter'>
//其中duration是綁定動畫的時間
<h4 v-if='flag' >這里是動畫的內(nèi)容</h4>
</transition >
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){
  //強制重繪 刷新
  el.offserWidth;
   //enter 表示動畫 開始之后的樣式,這里,可以設(shè)置小球完成動畫之后,結(jié)束狀態(tài)
   
   el.style.transform="translate(150px,450px)";
  el.style.transition="all 1s linear";
  //立即消失done()方法 ,其實就是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è)資訊頻道！

文章標(biāo)題：vue如何操作動畫-創(chuàng)新互聯(lián)
文章URL：http://m.rwnh.cn/article32/poesc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供電子商務(wù)、網(wǎng)站設(shè)計、網(wǎng)站排名、域名注冊、企業(yè)建站、響應(yīng)式網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)