详解Vue学习笔记进阶篇之列表过渡及其他

var app6 = new Vue({
  el: '#app6',
  data: {
    show: true,
    fadeInDuration: 1000,
    fadeOutDuration: 1000,
    maxFadeDuration: 1500,
    stop: false
  },
  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
          }
        }
      )
    }
  }
})

运行结果：

其中例子里的mounted是在Vue挂载完成，也就是模板中的html渲染到html页面中时的一个钩子函数，只会执行一次。具体内容可以理解下Vue的生命周期，这里就不赘述了。

但是如果这里不使用mounted的话，也是可以用初始渲染来实现，只不过比较麻烦。实现的方法是：

在transition中加入appear钩子函数:@appear=”appear”，然后在vue实例的methods中添加appear方法：

appear: function (el, done) {
      var vm = this
      Velocity(el,
        { opacity: 1 },
        {
          duration: this.fadeInDuration,
          complete: function () {
            done()
            if (!vm.stop) vm.show = false
          }
        }
      )
    }