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站一键三连哦！感谢支持！！！