最后，enter 和 leave 可以有第二个可选的回调参数，用于显式控制过渡如何结束。因此不必等待 CSS transitionend 事件， Vue.js 将等待你手工调用这个回调，以结束过渡。例如：
enter: function (el) { // 没有第二个参数 // 由 CSS transitionend 事件决定过渡何时结束 }
vs.
enter: function (el, done) { // 有第二个参数 // 过渡只有在调用 `done` 时结束 }
<p>当多个元素一起过渡时，Vue.js 会批量处理，只强制一次布局。
CSS 动画
CSS 动画用法同 CSS 过渡，区别是在动画中 v-enter 类名在节点插入 DOM 后不会立即删除，而是在 animationend 事件触发时删除。
示例： (省略了兼容性前缀)
<span v-show="show" transition="bounce">Look at me!</span>
.bounce-transition { display: inline-block; /* 否则 scale 动画不起作用 */ } .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 回调，否则它们将被同步调用，过渡将立即结束。
为 JavaScript 过渡显式声明 css: false 是个好主意，Vue.js 将跳过 CSS 检测。这样也会阻止无意间让 CSS 规则干扰过渡。
在下例中我们使用 jQuery 注册一个自定义的 JavaScript 过渡：
Vue.transition('fade', { css: false, 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() } })
然后用 transition 特性中：
<p transition="fade"></p>
渐近过渡
transition 与 v-for 一起用时可以创建渐近过渡。给过渡元素添加一个特性 stagger, enter-stagger 或 leave-stagger：
<div v-for="item in list" transition="stagger" stagger="100"></div>
或者，提供一个钩子 stagger, enter-stagger 或 leave-stagger，以更好的控制：
Vue.transition('stagger', { stagger: function (index) { // 每个过渡项目增加 50ms 延时 // 但是最大延时限制为 300ms return Math.min(300, index * 50) } })
您可能感兴趣的文章: