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

<div id="root">
  <transition name="fade"
    @before-enter="handleBeforeEnter"    //動(dòng)畫出現(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){     //接收一個(gè)參數(shù) el，為 dom 元素
      el.style.color = 'red'
    }
  }
})

<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){      //接收兩個(gè)參數(shù)，第一個(gè)參數(shù) el 為 dom 元素，第二個(gè)參數(shù)是 done 是個(gè)回調(diào)函數(shù)
      setTimeout(()=>{
        el.style.color = 'green'
        done()         //done 回調(diào)函數(shù)非常重要，在執(zhí)行完動(dòng)畫后需手動(dòng)執(zhí)行下這個(gè)函數(shù)，相當(dāng)于告訴 Vue 這個(gè)動(dòng)畫已經(jīng)執(zhí)行完了，會(huì)再去調(diào)用 after-enter 事件
      },2000)
    }
  }
})

<div id="root">
  <transition name="fade"
        @before-enter="handleBeforeEnter"
        @enter="handleEnter"
        @after-enter="handleAfterEnter"   //enter 事件中 done 被調(diào)用后，after-enter 事件會(huì)被觸發(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) {   //接收一個(gè)參數(shù) el，為 dom 元素
      setTimeout(()=>{
        el.style.color = 'blue'
      },2000)
    }
  }
})

<div id="root">
  <transition name="fade"
        @before-enter="handleBeforeEnter"
        @enter="handleEnter"
        @after-enter="handleAfterEnter"   //enter 事件中 done 被調(diào)用后，after-enter 事件會(huì)被觸發(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, {     //第一個(gè)參數(shù)是要操作的 dom 元素
        opacity: 1
      }, {
        duration: 1000,   //第三參數(shù)中需要配置一個(gè) complete 屬性，值為 done，因?yàn)?Velocity 執(zhí)行完后會(huì)自動(dòng)執(zhí)行 complete 屬性，這里設(shè)置為 done 是讓它去觸發(fā) after-enter 事件
        complete: done
      })
    },
    handleAfterEnter(el) {
      console.log('動(dòng)畫結(jié)束')
    }
  }
})