如何在组件开发中实现过渡效果

lighting 在插入、更新或移除 DOM 时，提供过渡效果的实现方法，可以应用于单个元素/组件、多个元素/组件和列表，实现方法相似，这里只介绍单个元素/组件的过渡和列表的渐进过渡。

要想使所写的过渡动画应用到元素或者组件，需要为组件添加 transition属性，transition 需要与如下情景中的任一种一起使用：

v-if
v-show
v-for

以下实例演示了如何在组件开发中实现过渡效果。

CSS3过渡

<!-- 在要过渡的元素上添加transition属性 -->
<div v-if="show" transition="expand"></div>

然后为 .expand-transition, .expand-enter 和 .expand-leave 添加 CSS 规则:

/* 必需 */
.expand-transition {
  transition: all 1s ease;
  width: 50px;
  height: 30px;
  background-color: red;
}
/* .expand-enter 定义进入的开始状态 */
/* .expand-leave 定义离开的结束状态 */
.expand-enter, .expand-leave {
  opacity: 0;
}

也可以在同一元素上通过动态绑定实现不同的过渡：

<div v-if="show" :transition="transitionName"></div>

data: {
  show: false,
  transitionName: 'fade'
}

另外，可以提供 JavaScript 钩子，在过渡的不同阶段触发以执行相应的操作:

App.defineViewModel("#index", {
  data: {
    show: true,
    transname: 'fade'
  },
  watch: {},
  methods: {}
}, {
  ready: function() {},
  beforeRender: function(params) {},
  afterRender: function(params) {},
  beforeUnRender: function() {},
  afterUnRender: function() {}
});
//在App.defineViewModel后调用
Light.Model.transition('expand', {
  beforeEnter: function (el) {
    el.textContent = 'beforeEnter'
  },
  enter: function (el) {
    el.textContent = 'enter'
  },
  afterEnter: function (el) {
    el.textContent = 'afterEnter'
  },
  enterCancelled: function (el) {
  },
  beforeLeave: function (el) {
    el.textContent = 'beforeLeave'
  },
  leave: function (el) {
    el.textContent = 'leave'
  },
  afterLeave: function (el) {
    el.textContent = 'afterLeave'
  },
  leaveCancelled: function (el) {
  }
})

JavaScript 过渡

可以只使用 JavaScript 钩子，不用定义任何 CSS 规则。此时，enter 和 leave钩子需要调用 done 回调，否则它们将被同步调用，过渡将立即结束。

以下是用jquery写的钩子：

<p transition="fade" v-if="show"></p>

Light.Model.transition('fade', {
  css: false,  //跳过css检测，防止css规则干扰过渡
  enter: function (el, done) {
    // 元素已被插入 DOM
    // 在动画结束后调用 done
    $(el)
      .css('opacity', 0)
      .animate({ opacity: 1 }, 400, done)
  },
  enterCancelled: function (el) {
    $(el).stop()
  },
  leave: function (el, done) {
    // 与 enter 相同
    $(el).animate({ opacity: 0 }, 1000, done)
  },
  leaveCancelled: function (el) {
    $(el).stop()
  }
})

渐进过渡

transition 与 v-for 一起用时可以创建渐进过渡。给过渡元素添加一个属性 stagger, enter-stagger 或 leave-stagger：

<div v-for="item in list" transition="stagger" stagger="100">{{ item.name }}</div>

.staggered-transition{
    transition: all .5s ease;
    overflow: hidden;
    margin: 0;
    height: 20px;
}
.staggered-enter, .staggered-leave {
    height: 0;
    opacity: 0;
}

或者，提供一个钩子 stagger, enter-stagger 或 leave-stagger，以更好地控制过渡过程：

Light.Model.transition('stagger', {
  stagger: function (index) {
    // 每个过渡项目增加 50ms 延时
    // 但是最大延时限制为 300ms
    return Math.min(300, index * 50)
  }
})