Vue 提供了两个内置组件,可以帮助你制作基于状态变化的过渡和动画:
<Transition> 会在一个元素或组件进入和离开 DOM 时应用动画。本章节会介绍如何使用它。
<TransitionGroup> 会在一个 v-for 列表中的元素或组件被插入,移动,或移除时应用动画。我们将在下一章节中介绍。
除了这两个组件,我们也可以通过其他技术手段来应用动画,比如切换 CSS class 或用状态绑定样式来驱动动画。这些其他的方法会在动画技巧章节中展开。
<Transition> 组件
<Transition> 是一个内置组件,这意味着它在任意别的组件中都可以被使用,无需注册。它可以将进入和离开动画应用到通过默认插槽传递给它的元素或组件上。进入或离开可以由以下的条件之一触发:
1.由 v-if 所触发的切换
2.由 v-show 所触发的切换
3.由特殊元素 <component> 切换的动态组件
以下是最基本用法的示例:
template
<button @click="show = !show">Toggle</button>
<Transition>
<p v-if="show">hello</p>
</Transition>
css
/* 下面我们会解释这些 class 是做什么的 */
.v-enter-active,
.v-leave-active {
transition: opacity 0.5s ease;
}
.v-enter-from,
.v-leave-to {
opacity: 0;
}
![](data:image/png;base64,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)
TIP:<Transition> 仅支持单个元素或组件作为其插槽内容。如果内容是一个组件,这个组件必须仅有一个根元素。
当一个 <Transition> 组件中的元素被插入或移除时,会发生下面这些事情:
1.Vue 会自动检测目标元素是否应用了 CSS 过渡或动画。如果是,则一些 CSS 过渡 class 会在适当的时机被添加和移除。
2.如果有作为监听器的 JavaScript 钩子,这些钩子函数会在适当时机被调用。
3.如果没有探测到 CSS 过渡或动画、也没有提供 JavaScript 钩子,那么 DOM 的插入、删除操作将在浏览器的下一个动画帧后执行。
基于 CSS 的过渡效果
CSS 过渡 class
一共有 6 个应用于进入与离开过渡效果的 CSS class。
![](data:image/png;base64,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)
1.v-enter-from:进入动画的起始状态。在元素插入之前添加,在元素插入完成后的下一帧移除。
2.v-enter-active:进入动画的生效状态。应用于整个进入动画阶段。在元素被插入之前添加,在过渡或动画完成之后移除。这个 class 可以被用来定义进入动画的持续时间、延迟与速度曲线类型。
3.v-enter-to:进入动画的结束状态。在元素插入完成后的下一帧被添加 (也就是 v-enter-from 被移除的同时),在过渡或动画完成之后移除。
4.v-leave-from:离开动画的起始状态。在离开过渡效果被触发时立即添加,在一帧后被移除。
5.v-leave-active:离开动画的生效状态。应用于整个离开动画阶段。在离开过渡效果被触发时立即添加,在过渡或动画完成之后移除。这个 class 可以被用来定义离开动画的持续时间、延迟与速度曲线类型。
6.v-leave-to:离开动画的结束状态。在一个离开动画被触发后的下一帧被添加 (也就是 v-leave-from 被移除的同时),在过渡或动画完成之后移除。
v-enter-active 和 v-leave-active 给我们提供了为进入和离开动画指定不同速度曲线的能力,我们将在下面的小节中看到一个示例。
为过渡效果命名
我们可以给 <Transition> 组件传一个 name prop 来声明一个过渡效果名:
<Transition name="fade">
...
</Transition>
对于一个有名字的过渡效果,对它起作用的过渡 class 会以其名字而不是 v 作为前缀。比如,上方例子中被应用的 class 将会是 fade-enter-active 而不是 v-enter-active。这个“fade”过渡的 class 应该是这样:
css
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.5s ease;
}
.fade-enter-from,
.fade-leave-to {
opacity: 0;
}
CSS 的 transition
<Transition> 一般都会搭配原生 CSS 过渡一起使用,正如你在上面的例子中所看到的那样。这个 transition CSS 属性是一个简写形式,使我们可以一次定义一个过渡的各个方面,包括需要执行动画的属性、持续时间和速度曲线。
下面是一个更高级的例子,它使用了不同的持续时间和速度曲线来过渡多个属性:
template
<Transition name="slide-fade">
<p v-if="show">hello</p>
</Transition>
css
/*
进入和离开动画可以使用不同
持续时间和速度曲线。
*/
.slide-fade-enter-active {
transition: all 0.3s ease-out;
}
.slide-fade-leave-active {
transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
}
.slide-fade-enter-from,
.slide-fade-leave-to {
transform: translateX(20px);
opacity: 0;
}
![](data:image/png;base64,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)
CSS 的 animation
原生 CSS 动画和 CSS transition 的应用方式基本上是相同的,只有一点不同,那就是 *-enter-from 不是在元素插入后立即移除,而是在一个 animationend 事件触发时被移除。
对于大多数的 CSS 动画,我们可以简单地在 *-enter-active 和 *-leave-active class 下声明它们。下面是一个示例:
template
<Transition name="bounce">
<p v-if="show" style="text-align: center;">
Hello here is some bouncy text!
</p>
</Transition>
css
.bounce-enter-active {
animation: bounce-in 0.5s;
}
.bounce-leave-active {
animation: bounce-in 0.5s reverse;
}
@keyframes bounce-in {
0% {
transform: scale(0);
}
50% {
transform: scale(1.25);
}
100% {
transform: scale(1);
}
}
![](data:image/png;base64,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6dtR7cd7s1p8TcGljGltAIBllFdU6uO9WXVe/d6ZEM4AAMs48PkR5eblm5+J76w45wwACDrf3eKKTp/RulWLm3TtQEfEOWcAACyGaW0AACyGcAYAwGIIZwAALIZwBgDAYghnAAAshnAGAMBiCGcAACyGcAYAwGIIZwAALIZwBgDAYghnAAAshnAGAMBiCGcAACyGcAYAwGIIZwAALIZwBgDAYsxwttlsAV8AACA47JLqDGPDMNq9GAAAUGNa23/kXFVVFayaAADo1AKmtf1/vnDhQlAKAgCgs7PXDGW73S673S6v16vKysoglgYAQOdU78jZZrOpvLyc6W0AANpZveecHQ6HHA6Hzp07p4qKimDVBwBAp2Orrq72SpLX6w34qq6ulmEYMgxD1dXVstlsCg0NldPpVEhISLDrBgCgwwoIZ99338eo/APa9+ULb/+PWvnWBQAALWczDMPrH8y+777w9Q9l/+8+BDMAAK0rYH7aZrOZYWu322UYhux2e8DjkghnAADakM0wjIBpbd/P/qPomiPrmncPI6ABAGg95sjZf9Rc83aevsfqu+c24QwAQOsxR84+NUfQ9S2rbx0AANAy/w9iwhb8WDSWmwAAAABJRU5ErkJggg==)
自定义过渡 class
你也可以向 <Transition> 传递以下的 props 来指定自定义的过渡 class:
enter-from-class
enter-active-class
enter-to-class
leave-from-class
leave-active-class
leave-to-class
你传入的这些 class 会覆盖相应阶段的默认 class 名。这个功能在你想要在 Vue 的动画机制下集成其他的第三方 CSS 动画库时非常有用,比如 Animate.css:
<!-- 假设你已经在页面中引入了 Animate.css -->
<Transition
name="custom-classes"
enter-active-class="animate__animated animate__tada"
leave-active-class="animate__animated animate__bounceOutRight"
>
<p v-if="show">hello</p>
</Transition>
同时使用 transition 和 animation
Vue 需要附加事件监听器,以便知道过渡何时结束。可以是 transitionend 或 animationend,这取决于你所应用的 CSS 规则。如果你仅仅使用二者的其中之一,Vue 可以自动探测到正确的类型。
然而在某些场景中,你或许想要在同一个元素上同时使用它们两个。举例来说,Vue 触发了一个 CSS 动画,同时鼠标悬停触发另一个 CSS 过渡。此时你需要显式地传入 type prop 来声明,告诉 Vue 需要关心哪种类型,传入的值是 animation 或 transition:
<Transition type="animation">...</Transition>
深层级过渡与显式过渡时长
尽管过渡 class 仅能应用在 <Transition> 的直接子元素上,我们还是可以使用深层级的 CSS 选择器,在深层级的元素上触发过渡效果。
template
<Transition name="nested">
<div v-if="show" class="outer">
<div class="inner">
Hello
</div>
</div>
</Transition>
css
/* 应用于嵌套元素的规则 */
.nested-enter-active .inner,
.nested-leave-active .inner {
transition: all 0.3s ease-in-out;
}
.nested-enter-from .inner,
.nested-leave-to .inner {
transform: translateX(30px);
opacity: 0;
}
/* ... 省略了其他必要的 CSS */
我们甚至可以在深层元素上添加一个过渡延迟,从而创建一个带渐进延迟的动画序列:
css
/* 延迟嵌套元素的进入以获得交错效果 */
.nested-enter-active .inner {
transition-delay: 0.25s;
}
然而,这会带来一个小问题。默认情况下,<Transition> 组件会通过监听过渡根元素上的第一个 transitionend 或者 animationend 事件来尝试自动判断过渡何时结束。而在嵌套的过渡中,期望的行为应该是等待所有内部元素的过渡完成。
在这种情况下,你可以通过向 <Transition> 组件传入 duration prop 来显式指定过渡的持续时间 (以毫秒为单位)。总持续时间应该匹配延迟加上内部元素的过渡持续时间:
<Transition :duration="550">...</Transition>
如果有必要的话,你也可以用对象的形式传入,分开指定进入和离开所需的时间:
<Transition :duration="{ enter: 500, leave: 800 }">...</Transition>
性能考量
你可能注意到我们上面例子中展示的动画所用到的 CSS 属性大多是 transform 和 opacity 之类的。用这些属性制作动画非常高效,因为:
1.他们在动画过程中不会影响到 DOM 结构,因此不会每一帧都触发昂贵的 CSS 布局重新计算。
大多数的现代浏览器都可以在执行 transform 动画时利用 GPU 进行硬件加速。
2.相比之下,像 height 或者 margin 这样的属性会触发 CSS 布局变动,因此执行它们的动画效果更昂贵,需要谨慎使用。我们可以在 CSS-Triggers 这类的网站查询哪些属性会在执行动画时触发 CSS 布局变动。
JavaScript 钩子
你可以通过监听 <Transition> 组件事件的方式在过渡过程中挂上钩子函数:
html
<Transition
@before-enter="onBeforeEnter"
@enter="onEnter"
@after-enter="onAfterEnter"
@enter-cancelled="onEnterCancelled"
@before-leave="onBeforeLeave"
@leave="onLeave"
@after-leave="onAfterLeave"
@leave-cancelled="onLeaveCancelled"
>
<!-- ... -->
</Transition>
js
export default {
// ...
methods: {
// 在元素被插入到 DOM 之前被调用
// 用这个来设置元素的 "enter-from" 状态
onBeforeEnter(el) {},
// 在元素被插入到 DOM 之后的下一帧被调用
// 用这个来开始进入动画
onEnter(el, done) {
// 调用回调函数 done 表示过渡结束
// 如果与 CSS 结合使用,则这个回调是可选参数
done()
},
// 当进入过渡完成时调用。
onAfterEnter(el) {},
onEnterCancelled(el) {},
// 在 leave 钩子之前调用
// 大多数时候,你应该只会用到 leave 钩子
onBeforeLeave(el) {},
// 在离开过渡开始时调用
// 用这个来开始离开动画
onLeave(el, done) {
// 调用回调函数 done 表示过渡结束
// 如果与 CSS 结合使用,则这个回调是可选参数
done()
},
// 在离开过渡完成、
// 且元素已从 DOM 中移除时调用
onAfterLeave(el) {},
// 仅在 v-show 过渡中可用
onLeaveCancelled(el) {}
}
}
这些钩子可以与 CSS 过渡或动画结合使用,也可以单独使用。
在使用仅由 JavaScript 执行的动画时,最好是添加一个 :css="false" prop。这显式地向 Vue 表明可以跳过对 CSS 过渡的自动探测。除了性能稍好一些之外,还可以防止 CSS 规则意外地干扰过渡效果。
<Transition
...
:css="false"
>
...
</Transition>
在有了 :css="false" 后,我们就自己全权负责控制什么时候过渡结束了。这种情况下对于 @enter 和 @leave 钩子来说,回调函数 done 就是必须的。否则,钩子将被同步调用,过渡将立即完成。
这里是使用 GreenSock 库执行动画的一个示例,你也可以使用任何你想要的库,比如 Anime.js 或者 Motion One。
![](data:image/png;base64,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)
可复用过渡效果
得益于 Vue 的组件系统,过渡效果是可以被封装复用的。要创建一个可被复用的过渡,我们需要为 <Transition> 组件创建一个包装组件,并向内传入插槽内容:
<!-- MyTransition.vue -->
<script>
// JavaScript 钩子逻辑...
</script>
<template>
<!-- 包装内置的 Transition 组件 -->
<Transition
name="my-transition"
@enter="onEnter"
@leave="onLeave">
<slot></slot> <!-- 向内传递插槽内容 -->
</Transition>
</template>
<style>
/*
必要的 CSS...
注意:避免在这里使用 <style scoped>
因为那不会应用到插槽内容上
*/
</style>
现在 MyTransition 可以在导入后像内置组件那样使用了:
<MyTransition>
<div v-if="show">Hello</div>
</MyTransition>
出现时过渡
如果你想在某个节点初次渲染时应用一个过渡效果,你可以添加 appear prop:
<Transition appear>
...
</Transition>
元素间过渡
除了通过 v-if / v-show 切换一个元素,我们也可以通过 v-if / v-else / v-else-if 在几个组件间进行切换,只要确保任一时刻只会有一个元素被渲染即可:
<Transition>
<button v-if="docState === 'saved'">Edit</button>
<button v-else-if="docState === 'edited'">Save</button>
<button v-else-if="docState === 'editing'">Cancel</button>
</Transition>
![](data:image/png;base64,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)
过渡模式
在之前的例子中,进入和离开的元素都是在同时开始动画的,因此我们不得不将它们设为 position: absolute 以避免二者同时存在时出现的布局问题。
然而,很多情况下这可能并不符合需求。我们可能想要先执行离开动画,然后在其完成之后再执行元素的进入动画。手动编排这样的动画是非常复杂的,好在我们可以通过向 <Transition> 传入一个 mode prop 来实现这个行为:
<Transition mode="out-in">
...
</Transition>
将之前的例子改为 mode="out-in" 后是这样:
![](data:image/png;base64,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)
<Transition> 也支持 mode="in-out",虽然这并不常用。
组件间过渡
<Transition> 也可以作用于动态组件之间的切换:
<Transition name="fade" mode="out-in">
<component :is="activeComponent"></component>
</Transition>
![](data:image/png;base64,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)
动态过渡
<Transition> 的 props (比如 name) 也可以是动态的!这让我们可以根据状态变化动态地应用不同类型的过渡:
<Transition :name="transitionName">
<!-- ... -->
</Transition>
这个特性的用处是可以提前定义好多组 CSS 过渡或动画的 class,然后在它们之间动态切换。
你也可以根据你的组件的当前状态在 JavaScript 过渡钩子中应用不同的行为。最后,创建动态过渡的终极方式还是创建可复用的过渡组件,并让这些组件根据动态的 props 来改变过渡的效果。掌握了这些技巧后,就真的只有你想不到,没有做不到的了。