CSS 动画
CSS 动画通过与 CSS 过渡效果一样的方式进行调用，区别就是动画中 .v-enter 类并不会在节点插入 DOM 后马上移除，而是在 animationend 事件触发时移除。
示例： (省略了兼容性前缀)
<span v-show="show" v-transition="bounce">Look at me!</span>
.bounce-enter { animation: bounce-in .5s; } .bounce-leave { animation: bounce-out .5s; } @keyframes bounce-in { 0% { transform: scale(0); } 50% { transform: scale(1.5); } 100% { transform: scale(1); } } @keyframes bounce-out { 0% { transform: scale(1); } 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) } })
示例：
