JavaScript 钩子

点击打开视频讲解更加详细「链接」

可以在 attribute 中声明 JavaScript 钩子

完整案例：

这些钩子函数可以结合 CSS transitions/animations 使用，也可以单独使用。

`注意：当只用 JavaScript 过渡的时候，在 enter 和 leave 中必须使用 done 进行回调。否则，它们将被同步调用，过渡会立即完成。`

`推荐对于仅使用 JavaScript 过渡的元素添加 v-bind:css="false"，Vue 会跳过 CSS 的检测。这也可以避免过渡过程中 CSS 的影响。`

使用 Velocity.js 完整案例：

  

    Toggle

  

  

    


      Demo

    

  

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