vue中动画函数钩子js动画

系统管理员 2022-04-15 03:45 224阅读 0赞

1. 动画开始：@before-enter      @before-leave

动画过程： @enter                 @leave    在这个过程中有done方法，表示动画结束，done方法执行时，就会触发动画结束函数

动画结束：@after-enter          @after-leave

注意：动画变化，不是过渡。

<div id="demo">
        <button @click="show = !show">click me</button>
        <transition name="fade" 
                    @before-enter="handleBeforeEnter"
                    @enter="handleEnter"
                    @after-enter="handleAfterEnter">
          <div v-if="show" class="de">sfsf</div>
        </transition>
      </div>
      <script>
        new Vue({
          el: '#demo',
          data: {
            show: true
          },
          methods: {
            handleBeforeEnter(dom) {
              dom.style.color = 'red'
            },
            handleEnter (dom, done) {
              setTimeout( () => {
                dom.style.color = 'green'
              }, 3000)
              setTimeout( () => {
                done()
              }, 6000)
            },
            handleAfterEnter (dom) {
              dom.style.color = 'black'
            }
          }
        })
      </script>

2. 使用第三方js动画库 velocit.js

在过渡过程@enter 和 @leave两个函数中，要按第三方库的写法来写[（velocity.js）][velocity.js]

<div id="demo">
        <button @click="show = !show">click me</button>
        <transition name="fade" 
                    @before-enter="handleBeforeEnter"
                    @enter="handleEnter"
                    @after-enter="handleAfterEnter">
          <div v-if="show" class="de">sfsf</div>
        </transition>
      </div>
      <script>
        new Vue({
          el: '#demo',
          data: {
            show: true
          },
          methods: {
            handleBeforeEnter(dom) {
              dom.style.opacity = 0
            },
            handleEnter (dom, done) {
              Velocity(dom, {opacity: 1}, {duration: 3000, complete: done})
            },
            handleAfterEnter (dom) {
              console.log("complete animation")
            }
          }
        })
      </script>

结果：opacity的设置时过渡，而对color颜色的设置，不是过渡效果

[velocity.js]: http://velocityjs.org/