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=";></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站一键三连哦！感谢支持！！！「链接」