064_末晨曦Vue技术_过渡 & 动画之JavaScript 钩子

JavaScript 钩子

点击打开视频讲解更加详细

可以在 attribute 中声明 JavaScript 钩子

完整案例：

  
    
              Toggle render                              
hello
            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) {      // ...    }  }}

这些钩子函数可以结合 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站一键三连哦！感谢支持！！！