JavaScript 鉤子

點擊打開視頻講解更加詳細

可以在 attribute 中聲明 JavaScript 鉤子

完整案例：

<template>
  <div id="app">
    <div id="example-3">
      <button @click="show = !show">
        Toggle render
      </button>

      <!-- JavaScript 鉤子 -->
    
      <transition
        v-on:before-enter="beforeEnter"
        v-on:enter="enter"
        v-on:after-enter="afterEnter"
        v-on:enter-cancelled="enterCancelled"

        v-on:before-leave="beforeLeave"
        v-on:leave="leave"
        v-on:after-leave="afterLeave"
        v-on:leave-cancelled="leaveCancelled"
      >
        <p v-if="show">hello</p>
      </transition>
    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return {
      show: true
    } 
  },
  mounted() {
    
  },
  components:{
    
  },
  methods:{
    // --------
    // 進入中
    // --------
    beforeEnter: function (el) {
      console.log('beforeEnter')
    },
    // 當與 CSS 結合使用時
    // 回調函數 done 是可選的
    enter: function (el, done) {
      // ...
      done()
    },
    afterEnter: function (el) {
      // ...
    },
    enterCancelled: function (el) {
      // ...
    },

    // --------
    // 離開時
    // --------

    beforeLeave: function (el) {
      console.log('beforeLeave')
    },
    // 當與 CSS 結合使用時
    // 回調函數 done 是可選的
    leave: function (el, done) {
      // ...
      done()
    },
    afterLeave: function (el) {
      // ...
    },
    // leaveCancelled 只用於 v-show 中
    leaveCancelled: function (el) {
      // ...
    }
  }
}
</script>

<style scoped>

</style>

這些鉤子函數可以結合 CSS transitions/animations 使用，也可以單獨使用。

註意：當只用 JavaScript 過渡的時候，在 enter 和 leave 中必須使用 done 進行回調。否則，它們將被同步調用，過渡會立即完成。

推薦對於僅使用 JavaScript 過渡的元素添加 v-bind:css="false"，Vue 會跳過 CSS 的檢測。這也可以避免過渡過程中 CSS 的影響。

使用 Velocity.js 完整案例：

<!--
Velocity 和 jQuery.animate 的工作方式類似，也是用來實現 JavaScript 動畫的一個很棒的選擇
-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>

<div id="example-4">
  <button @click="show = !show">
    Toggle
  </button>
  <transition
    v-on:before-enter="beforeEnter"
    v-on:enter="enter"
    v-on:leave="leave"
    v-bind:css="false"
  >
    <p v-if="show">
      Demo
    </p>
  </transition>
</div>

new Vue({
  el: '#example-4',
  data: {
    show: false
  },
  methods: {
    beforeEnter: function (el) {
      el.style.opacity = 0
      el.style.transformOrigin = 'left'
    },
    enter: function (el, done) {
      Velocity(el, { opacity: 1, fontSize: '1.4em' }, { duration: 300 })
      Velocity(el, { fontSize: '1em' }, { complete: done })
    },
    leave: function (el, done) {
      Velocity(el, { translateX: '15px', rotateZ: '50deg' }, { duration: 600 })
      Velocity(el, { rotateZ: '100deg' }, { loop: 2 })
      Velocity(el, {
        rotateZ: '45deg',
        translateY: '30px',
        translateX: '30px',
        opacity: 0
      }, { complete: done })
    }
  }
})

若對您有幫助，請點擊跳轉到B站一鍵三連哦！感謝支持！！！