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

咬着拽天下的程序猿

于 2022-09-06 16:43:10 发布

阅读量181

点赞数

分类专栏： Vue2 世界文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/ls_952754/article/details/126727530

版权

Vue2 世界专栏收录该内容

48 篇文章 3 订阅

订阅专栏

本文详细介绍了Vue.js中如何使用JavaScript钩子函数进行过渡效果的控制，包括beforeEnter、enter、afterEnter、beforeLeave、leave等。通过示例展示了如何结合Velocity.js实现动态过渡效果，并提醒在仅使用JavaScript过渡时需要注意回调函数done的使用。同时，提供了不使用CSS的配置示例，以避免过渡过程中的样式冲突。

摘要由CSDN通过智能技术生成

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 })
    }
  }
})