聊一聊Vue.js过渡效果

}
50% {
transform: scale(1.5);
}
100% {
transform: scale(0);
}
}

结果

纯 JavaScript 过渡效果
你也可以只使用 JavaScript 钩子，不定义任何 CSS 过渡规则。当只使用 JavaScript 钩子时，enter 和 leave 钩子必须使用 done 回调，否则它们将会被同步调用，过渡将立即结束。下面的示例中我们使用 jQuery 来注册一个自定义的 JavaScript 过渡效果：

Vue.transition('fade', {
 enter: function (el, done) {
  // 此时元素已被插入 DOM
  // 动画完成时调用 done 回调
  $(el)
   .css('opacity', 0)
   .animate({ opacity: 1 }, 1000, done)
 },
 enterCancelled: function (el) {
  $(el).stop()
 },
 leave: function (el, done) {
  // 与 enter 钩子同理
  $(el).animate({ opacity: 0 }, 1000, done)
 },
 leaveCancelled: function (el) {
  $(el).stop()
 }
})

定义此过渡之后，你就可以通过给 v-transition 指定对应的 ID 来调用它：

<p v-transition=”fade”></p>

如果一个只使用 JavaScript 过渡效果的元素恰巧也受到其它 CSS 过渡/动画规则的影响，这可能会对 Vue 的 CSS 过渡检测机制产生干扰。碰到这样的状况时，你可以通过给你的钩子对象添加 css: false 来禁止 CSS 检测。

渐进过渡效果
当同时使用 v-transition 和 v-repeat 时，我们可以为列表元素添加渐进的过渡效果，你只需要为你的过渡元素加上 stagger， enter-stagger 或者 leave-stagger 特性（以毫秒为单位）：

<div v-repeat=”list” v-transition stagger=”100″></div>

或者你也可以提供 stagger， enterStagger 或 eaveStagger 钩子来进行更细粒度的控制：

Vue.transition('stagger', {
 stagger: function (index) {
  // 为每个过渡元素增加 50ms 的延迟,
  // 但是最大延迟为 300ms
  return Math.min(300, index * 50)
 }
})

示例：