Vue动态过渡

妖狐艹你老母 2024-04-17 05:38 61阅读 0赞

# Vue动态过渡 #

在 Vue 中即使是过渡也是数据驱动的！动态过渡最基本的例子是通过 `name` 特性来绑定动态值。

当你想用 Vue 的过渡系统来定义的 CSS 过渡/动画在不同过渡间切换会非常有用。

所有过渡特性都可以动态绑定，但我们不仅仅只有特性可以利用，还可以通过事件钩子获取上下文中的所有数据，因为事件钩子都是方法。这意味着，根据组件的状态不同，你的 JavaScript 过渡会有不同的表现。

new Vue({ 
      el: '#dynamic-fade-demo',
      data: { 
        show: true,
        fadeInDuration: 1000,
        fadeOutDuration: 1000,
        maxFadeDuration: 1500,
        stop: true
      },
      mounted: function () { 
        this.show = false
      },
      methods: { 
        beforeEnter: function (el) { 
          el.style.opacity = 0
        },
        enter: function (el, done) { 
          var vm = this
          Velocity(el,
            {  opacity: 1 },
            { 
              duration: this.fadeInDuration,
              complete: function () { 
                done()
                if (!vm.stop) vm.show = false
              }
            }
          )
        },
        leave: function (el, done) { 
          var vm = this
          Velocity(el,
            {  opacity: 0 },
            { 
              duration: this.fadeOutDuration,
              complete: function () { 
                done()
                vm.show = true
              }
            }
          )
        }
      }
    })

最后，创建动态过渡的最终方案是组件通过接受 props 来动态修改之前的过渡。一句老话，唯一的限制是你的想象力。