Vue中JS動畫與Velocity.js的結(jié)合使用

前面學習了用css實現(xiàn)動畫效果，那 Vue 中能不能用js實現(xiàn)動畫效果呢？

為岳西等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計制作服務，及岳西網(wǎng)站建設(shè)行業(yè)解決方案。主營業(yè)務為成都網(wǎng)站建設(shè)、網(wǎng)站制作、岳西網(wǎng)站設(shè)計，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務。我們深信只要達到每一位用戶的要求，就會得到認可，從而選擇與我們長期合作。這樣，我們也可以走得更遠！

其實 Vue 提供了很多動畫鉤子

enter

入場動畫鉤子函數(shù)有before-enter、enter、after-enter

before-enter

動畫出現(xiàn)前的事件

<div id="root">
  <transition name="fade"
    @before-enter="handleBeforeEnter"    //動畫出現(xiàn)前的事件
  >
    <div v-if="show">hello world</div>
  </transition>
  <button @click="handleClick">切換</button>
</div>
let vm = new Vue({
  el: '#root',
  data: {
    show:true
  },
  methods: {
    handleClick(){
      this.show = !this.show
    },
    handleBeforeEnter(el){     //接收一個參數(shù) el，為 dom 元素
      el.style.color = 'red'
    }
  }
})

enter

before-enter事件結(jié)束后執(zhí)行

<div id="root">
  <transition name="fade"
    @before-enter="handleBeforeEnter"
    @enter="handleEnter"    //before-enter 事件結(jié)束后執(zhí)行
  >
    <div v-if="show">hello world</div>
  </transition>
  <button @click="handleClick">切換</button>
</div>
let vm = new Vue({
  el: '#root',
  data: {
    show:true
  },
  methods: {
    handleClick(){
      this.show = !this.show
    },
    handleBeforeEnter(el){
      el.style.color = 'red'
    }
    handleEnter(el，done){      //接收兩個參數(shù)，第一個參數(shù) el 為 dom 元素，第二個參數(shù)是 done 是個回調(diào)函數(shù)
      setTimeout(()=>{
        el.style.color = 'green'
        done()         //done 回調(diào)函數(shù)非常重要，在執(zhí)行完動畫后需手動執(zhí)行下這個函數(shù)，相當于告訴 Vue 這個動畫已經(jīng)執(zhí)行完了，會再去調(diào)用 after-enter 事件
      },2000)
    }
  }
})

after-enter

enter事件中done被調(diào)用后，after-enter事件會被觸發(fā)

<div id="root">
  <transition name="fade"
        @before-enter="handleBeforeEnter"
        @enter="handleEnter"
        @after-enter="handleAfterEnter"   //enter 事件中 done 被調(diào)用后，after-enter 事件會被觸發(fā)
  >
    <div v-if="show">hello world</div>
  </transition>
  <button @click="handleClick">切換</button>
</div>
let vm = new Vue({
  el: '#root',
  data: {
    show: true
  },
  methods: {
    handleClick() {
      this.show = !this.show
    },
    handleBeforeEnter(el) {
      el.style.color = 'red'
    },
    handleEnter(el, done) {
      setTimeout(() => {
        el.style.color = 'green'
        done()
      }, 2000)
    },
    handleAfterEnter(el) {   //接收一個參數(shù) el，為 dom 元素
      setTimeout(()=>{
        el.style.color = 'blue'
      },2000)
    }
  }
})

leave

與入場動畫對應的出場動畫鉤子函數(shù)有before-leave、leave、after-leave。它們的用法與入場動畫用法一樣

Velocity.js庫

有了上面基礎(chǔ)后，配合Velocity.js庫，能實現(xiàn)更強大的動畫效果。

<div id="root">
  <transition name="fade"
        @before-enter="handleBeforeEnter"
        @enter="handleEnter"
        @after-enter="handleAfterEnter"   //enter 事件中 done 被調(diào)用后，after-enter 事件會被觸發(fā)
  >
    <div v-if="show">hello world</div>
  </transition>
  <button @click="handleClick">切換</button>
</div>
let vm = new Vue({
  el: '#root',
  data: {
    show: true
  },
  methods: {
    handleClick() {
      this.show = !this.show
    },
    handleBeforeEnter(el) {
      el.style.opacity = 0
    },
    handleEnter(el, done) {
      Velocity(el, {     //第一個參數(shù)是要操作的 dom 元素
        opacity: 1
      }, {
        duration: 1000,   //第三參數(shù)中需要配置一個 complete 屬性，值為 done，因為 Velocity 執(zhí)行完后會自動執(zhí)行 complete 屬性，這里設(shè)置為 done 是讓它去觸發(fā) after-enter 事件
        complete: done
      })
    },
    handleAfterEnter(el) {
      console.log('動畫結(jié)束')
    }
  }
})

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

分享標題：Vue中JS動畫與Velocity.js的結(jié)合使用
當前URL：http://chinadenli.net/article24/iidcce.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供搜索引擎優(yōu)化、全網(wǎng)營銷推廣、網(wǎng)站營銷、網(wǎng)站維護、品牌網(wǎng)站設(shè)計、面包屑導航

聲明：本網(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)

猜你還喜歡下面的內(nèi)容

欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

Vue中JS動畫與Velocity.js的結(jié)合使用