Vue 动画
Vue 内置的 <Transition>
组件可以帮助我们在元素使用 v-if
、v-show
或动态组件添加或移除时执行动画。
在其他情况下,使用纯 CSS 过渡和动画也没有问题。
CSS 过渡和动画简介
但在我们使用 Vue 特有的内置 <Transition>
组件创建动画之前,让我们来看两个如何使用纯 CSS 动画和过渡与 Vue 结合的示例。
示例
App.vue
:
<template>
<h1>Basic CSS Transition</h1>
<button @click="this.doesRotate = true">Rotate</button>
<div :class="{ rotate: doesRotate }"></div>
</template>
<script>
export default {
data() {
return {
doesRotate: false
}
}
}
</script>
<style scoped>
.rotate {
rotate: 160deg;
transition: rotate 1s;
}
div {
border: solid black 2px;
background-color: lightcoral;
width: 60px;
height: 60px;
}
h1, button, div {
margin: 10px;
}
</style>
运行示例 »
在上一个示例中,我们使用 v-bind
为 <div>
标签添加了一个 class 以使其旋转。旋转耗时 1 秒是因为它通过 CSS 的 transition
属性定义的。
在下面的示例中,我们展示了如何使用 CSS 的 animation
属性来移动一个对象。
示例
App.vue
:
<template>
<h1>Basic CSS Animation</h1>
<button @click="this.doesMove = true">Start</button>
<div :class="{ move: doesMove }"></div>
</template>
<script>
export default {
data() {
return {
doesMove: false
}
}
}
</script>
<style scoped>
.move {
animation: move .5s alternate 4 ease-in-out;
}
@keyframes move {
from {
translate: 0 0;
}
to {
translate: 70px 0;
}
}
div {
border: solid black 2px;
background-color: lightcoral;
border-radius: 50%;
width: 60px;
height: 60px;
}
h1, button, div {
margin: 10px;
}
</style>
运行示例 »
The <Transition> 组件
在上面两个示例中,使用纯 CSS 过渡和动画没有问题。
但幸运的是,Vue 提供了内置的 <Transition>
组件,当元素使用 v-if
或 v-show
被添加到我们的应用程序或从应用程序中移除时,我们可以用它来动画化,因为这用纯 CSS 动画很难实现。
首先,让我们创建一个应用程序,其中一个按钮可以添加或移除一个 <p>
标签。
示例
App.vue
:
<template>
<h1>Add/Remove <p> Tag</h1>
<button @click="this.exists = !this.exists">{{btnText}}</button><br>
<p v-if="exists">Hello World!</p>
</template>
<script>
export default {
data() {
return {
exists: false
}
},
computed: {
btnText() {
if(this.exists) {
return 'Remove';
}
else {
return 'Add';
}
}
}
}
</script>
<style>
p {
background-color: lightgreen;
display: inline-block;
padding: 10px;
}
</style>
运行示例 »
现在,让我们将 <Transition>
组件包裹在 <p>
标签周围,看看我们如何为 <p>
标签的移除添加动画。
当我们使用 <Transition>
组件时,我们会自动获得六个不同的 CSS 类,可用于在元素添加或移除时进行动画。
在下面的示例中,我们将使用自动可用的 v-leave-from
和 v-leave-to
类,在移除 <p>
标签时创建一个淡出动画。
示例
App.vue
:
<template>
<h1>Add/Remove <p> Tag</h1>
<button @click="this.exists = !this.exists">{{btnText}}</button><br>
<Transition>
<p v-if="exists">Hello World!</p>
</Transition>
</template>
<script>
export default {
data() {
return {
exists: false
}
},
computed: {
btnText() {
if(this.exists) {
return 'Remove';
}
else {
return 'Add';
}
}
}
}
</script>
<style>
.v-leave-from {
opacity: 1;
}
.v-leave-to {
opacity: 0;
}
p {
background-color: lightgreen;
display: inline-block;
padding: 10px;
transition: opacity 0.5s;
}
</style>
运行示例 »
六个 <Transition> 类
当我们使用 <Transition>
组件时,有六个类可供我们自动使用。
当 <Transition>
组件内的元素被添加时,我们可以使用前三个类来动画化此过渡。
- v-enter-from
- v-enter-active
- v-enter-to
当 <Transition>
组件内的元素被移除时,我们可以使用接下来的三个类。
- v-leave-from
- v-leave-active
- v-leave-to
注意: <Transition>
组件的根级别只能有一个元素。
现在,让我们使用这四个类,以便我们可以在 <p>
标签被添加和移除时为其添加动画。
示例
App.vue
:
<template>
<h1>Add/Remove <p> Tag</h1>
<button @click="this.exists = !this.exists">{{btnText}}</button><br>
<Transition>
<p v-if="exists">Hello World!</p>
</Transition>
</template>
<script>
export default {
data() {
return {
exists: false
}
},
computed: {
btnText() {
if(this.exists) {
return 'Remove';
}
else {
return 'Add';
}
}
}
}
</script>
<style>
.v-enter-from {
opacity: 0;
translate: -100px 0;
}
.v-enter-to {
opacity: 1;
translate: 0 0;
}
.v-leave-from {
opacity: 1;
translate: 0 0;
}
.v-leave-to {
opacity: 0;
translate: 100px 0;
}
p {
background-color: lightgreen;
display: inline-block;
padding: 10px;
transition: all 0.5s;
}
</style>
运行示例 »
我们还可以使用 v-enter-active
和 v-leave-active
来在元素添加时或移除时设置样式或动画。
示例
App.vue
:
<template>
<h1>Add/Remove <p> Tag</h1>
<button @click="this.exists = !this.exists">{{btnText}}</button><br>
<Transition>
<p v-if="exists">Hello World!</p>
</Transition>
</template>
<script>
export default {
data() {
return {
exists: false
}
},
computed: {
btnText() {
if(this.exists) {
return 'Remove';
}
else {
return 'Add';
}
}
}
}
</script>
<style>
.v-enter-active {
background-color: lightgreen;
animation: added 1s;
}
.v-leave-active {
background-color: lightcoral;
animation: added 1s reverse;
}
@keyframes added {
from {
opacity: 0;
translate: -100px 0;
}
to {
opacity: 1;
translate: 0 0;
}
}
p {
display: inline-block;
padding: 10px;
border: dashed black 1px;
}
</style>
运行示例 »
Transition 'name' Prop
如果您有多个 <Transition>
组件,但希望其中至少一个 <Transition>
组件具有不同的动画,则需要为 <Transition>
组件指定不同的名称,以便区分它们。
我们可以使用 name
prop 来选择 <Transition>
组件的名称,这也会改变过渡类的名称,因此我们可以为该组件设置不同的 CSS 动画规则。
<Transition name="swirl">
如果过渡 name
prop 的值为 'swirl',则自动可用的类现在将以 'swirl-' 开头,而不是 'v-'。
- swirl-enter-from
- swirl-enter-active
- swirl-enter-to
- swirl-leave-from
- swirl-leave-active
- swirl-leave-to
在下面的示例中,我们使用 name
prop 为 <Transition>
组件赋予不同的动画。其中一个 <Transition>
组件没有指定名称,因此使用以 'v-' 开头的自动生成的 CSS 类来设置动画。另一个 <Transition>
组件被命名为 'swirl',以便它可以使用以 'swirl-' 开头的自动生成的 CSS 类来设置动画规则。
示例
App.vue
:
<template>
<h1>Add/Remove <p> Tag</h1>
<p>The second transition in this example has the name prop "swirl", so that we can keep the transitions apart with different class names.</p>
<hr>
<button @click="this.p1Exists = !this.p1Exists">{{btn1Text}}</button><br>
<Transition>
<p v-if="p1Exists" id="p1">Hello World!</p>
</Transition>
<hr>
<button @click="this.p2Exists = !this.p2Exists">{{btn2Text}}</button><br>
<Transition name="swirl">
<p v-if="p2Exists" id="p2">Hello World!</p>
</Transition>
</template>
<script>
export default {
data() {
return {
p1Exists: false,
p2Exists: false
}
},
computed: {
btn1Text() {
if(this.p1Exists) {
return 'Remove';
}
else {
return 'Add';
}
},
btn2Text() {
if(this.p2Exists) {
return 'Remove';
}
else {
return 'Add';
}
}
}
}
</script>
<style>
.v-enter-active {
background-color: lightgreen;
animation: added 1s;
}
.v-leave-active {
background-color: lightcoral;
animation: added 1s reverse;
}
@keyframes added {
from {
opacity: 0;
translate: -100px 0;
}
to {
opacity: 1;
translate: 0 0;
}
}
.swirl-enter-active {
animation: swirlAdded 1s;
}
.swirl-leave-active {
animation: swirlAdded 1s reverse;
}
@keyframes swirlAdded {
from {
opacity: 0;
rotate: 0;
scale: 0.1;
}
to {
opacity: 1;
rotate: 360deg;
scale: 1;
}
}
#p1, #p2 {
display: inline-block;
padding: 10px;
border: dashed black 1px;
}
#p2 {
background-color: lightcoral;
}
</style>
运行示例 »
JavaScript Transition Hooks
正如刚刚提到的,每个 Transition 类都对应一个事件,我们可以通过该事件来运行一些 JavaScript 代码。
Transition Class | JavaScript Event |
---|---|
v-enter-from | before-enter |
v-enter-active | enter |
v-enter-to | after-enter enter-cancelled |
v-leave-from | before-leave |
v-leave-active | leave |
v-leave-to | after-leave leave-cancelled (仅 v-show) |
在下面的示例中,当 after-enter
事件发生时,会运行一个方法,该方法会显示一个红色的 <div>
元素。
示例
App.vue
:
<template>
<h1>JavaScript Transition Hooks</h1>
<p>This code hooks into "after-enter" so that after the initial animation is done, a method runs that displays a red div.</p>
<button @click="pVisible=true">Create p-tag!</button><br>
<Transition @after-enter="onAfterEnter">
<p v-show="pVisible" id="p1">Hello World!</p>
</Transition>
<br>
<div v-show="divVisible">This appears after the "enter-active" phase of the transition.</div>
</template>
<script>
export default {
data() {
return {
pVisible: false,
divVisible: false
}
},
methods: {
onAfterEnter() {
this.divVisible = true;
}
}
}
</script>
<style scoped>
.v-enter-active {
animation: swirlAdded 1s;
}
@keyframes swirlAdded {
from {
opacity: 0;
rotate: 0;
scale: 0.1;
}
to {
opacity: 1;
rotate: 360deg;
scale: 1;
}
}
#p1, div {
display: inline-block;
padding: 10px;
border: dashed black 1px;
}
#p1 {
background-color: lightgreen;
}
div {
background-color: lightcoral;
}
</style>
运行示例 »
您可以使用下面的示例中的“切换”按钮来中断 <p>
元素的 enter transition 阶段,从而触发 enter-cancelled
事件。
示例
App.vue
:
<template>
<h1>The 'enter-cancelled' Event</h1>
<p>Click the toggle button again before the enter animation is finished to trigger the 'enter-cancelled' event.</p>
<button @click="pVisible=!pVisible">Toggle</button><br>
<Transition @enter-cancelled="onEnterCancelled">
<p v-if="pVisible" id="p1">Hello World!</p>
</Transition>
<br>
<div v-if="divVisible">You interrupted the "enter-active" transition.</div>
</template>
<script>
export default {
data() {
return {
pVisible: false,
divVisible: false
}
},
methods: {
onEnterCancelled() {
this.divVisible = true;
}
}
}
</script>
<style scoped>
.v-enter-active {
animation: swirlAdded 2s;
}
@keyframes swirlAdded {
from {
opacity: 0;
rotate: 0;
scale: 0.1;
}
to {
opacity: 1;
rotate: 720deg;
scale: 1;
}
}
#p1, div {
display: inline-block;
padding: 10px;
border: dashed black 1px;
}
#p1 {
background-color: lightgreen;
}
div {
background-color: lightcoral;
}
</style>
运行示例 »
The 'appear' Prop
如果我们有一个需要在页面加载时进行动画的元素,我们需要在 <Transition>
组件上使用 appear
prop。
<Transition appear>
...
</Transition>
在此示例中,appear
prop 在页面首次加载时启动动画。
示例
App.vue
:
<template>
<h1>The 'appear' Prop</h1>
<p>The 'appear' prop starts the animation when the p tag below is rendered for the first time as the page opens. Without the 'appear' prop, this example would have had no animation.</p>
<Transition appear>
<p id="p1">Hello World!</p>
</Transition>
</template>
<style>
.v-enter-active {
animation: swirlAdded 1s;
}
@keyframes swirlAdded {
from {
opacity: 0;
rotate: 0;
scale: 0.1;
}
to {
opacity: 1;
rotate: 360deg;
scale: 1;
}
}
#p1 {
display: inline-block;
padding: 10px;
border: dashed black 1px;
background-color: lightgreen;
}
</style>
运行示例 »
Transition Between Elements
只要我们通过使用 <v-if>
和 <v-else-if>
来确保一次只显示一个元素,<Transition>
组件也可以用于在多个元素之间切换。
示例
App.vue
:
<template>
<h1>Transition Between Elements</h1>
<p>Click the button to get a new image.</p>
<p>The new image is added before the previous is removed. We will fix this in the next example with mode="out-in".</p>
<button @click="newImg">Next image</button><br>
<Transition>
<img src="/img_pizza.svg" v-if="imgActive === 'pizza'">
<img src="/img_apple.svg" v-else-if="imgActive === 'apple'">
<img src="/img_cake.svg" v-else-if="imgActive === 'cake'">
<img src="/img_fish.svg" v-else-if="imgActive === 'fish'">
<img src="/img_rice.svg" v-else-if="imgActive === 'rice'">
</Transition>
</template>
<script>
export default {
data() {
return {
imgActive: 'pizza',
imgs: ['pizza', 'apple', 'cake', 'fish', 'rice'],
indexNbr: 0
}
},
methods: {
newImg() {
this.indexNbr++;
if(this.indexNbr >= this.imgs.length) {
this.indexNbr = 0;
}
this.imgActive = this.imgs[this.indexNbr];
}
}
}
</script>
<style>
.v-enter-active {
animation: swirlAdded 1s;
}
.v-leave-active {
animation: swirlAdded 1s reverse;
}
@keyframes swirlAdded {
from {
opacity: 0;
rotate: 0;
scale: 0.1;
}
to {
opacity: 1;
rotate: 360deg;
scale: 1;
}
}
img {
width: 100px;
margin: 20px;
}
img:hover {
cursor: pointer;
}
</style>
运行示例 »
mode="out-in"
在上一个示例中,新的图像在旧图像被移除之前就被添加了。
我们使用 <Transition>
组件上的 mode="out-in"
prop 和 prop 值,以便在下一个元素被添加之前完成一个元素的移除。
示例
除了 mode="out-in"
之外,此示例还使用了计算值 'imgActive',而不是我们在上一个示例中使用的 'newImg' 方法。
App.vue
:
<template>
<h1>mode="out-in"</h1>
<p>Click the button to get a new image.</p>
<p>With mode="out-in", the next image is not added until the current image is removed. Another difference from the previous example, is that here we use computed prop instead of a method.</p>
<button @click="indexNbr++">Next image</button><br>
<Transition mode="out-in">
<img src="/img_pizza.svg" v-if="imgActive === 'pizza'">
<img src="/img_apple.svg" v-else-if="imgActive === 'apple'">
<img src="/img_cake.svg" v-else-if="imgActive === 'cake'">
<img src="/img_fish.svg" v-else-if="imgActive === 'fish'">
<img src="/img_rice.svg" v-else-if="imgActive === 'rice'">
</Transition>
</template>
<script>
export default {
data() {
return {
imgs: ['pizza', 'apple', 'cake', 'fish', 'rice'],
indexNbr: 0
}
},
computed: {
imgActive() {
if(this.indexNbr >= this.imgs.length) {
this.indexNbr = 0;
}
return this.imgs[this.indexNbr];
}
}
}
</script>
<style>
.v-enter-active {
animation: swirlAdded 0.7s;
}
.v-leave-active {
animation: swirlAdded 0.7s reverse;
}
@keyframes swirlAdded {
from {
opacity: 0;
rotate: 0;
scale: 0.1;
}
to {
opacity: 1;
rotate: 360deg;
scale: 1;
}
}
img {
width: 100px;
margin: 20px;
}
img:hover {
cursor: pointer;
}
</style>
运行示例 »
Transition with Dynamic Components
我们还可以使用 <Transition>
组件来动画化动态组件之间的切换。
示例
App.vue
:
<template>
<h1>Transition with Dynamic Components</h1>
<p>The Transition component wraps around the dynamic component so that the switching can be animated.</p>
<button @click="toggleValue = !toggleValue">Switch component</button>
<Transition mode="out-in">
<component :is="activeComp"></component>
</Transition>
</template>
<script>
export default {
data () {
return {
toggleValue: true
}
},
computed: {
activeComp() {
if(this.toggleValue) {
return 'comp-one'
}
else {
return 'comp-two'
}
}
}
}
</script>
<style>
.v-enter-active {
animation: slideIn 0.5s;
}
@keyframes slideIn {
from {
translate: -200px 0;
opacity: 0;
}
to {
translate: 0 0;
opacity: 1;
}
}
.v-leave-active {
animation: slideOut 0.5s;
}
@keyframes slideOut {
from {
translate: 0 0;
opacity: 1;
}
to {
translate: 200px 0;
opacity: 0;
}
}
#app {
width: 350px;
margin: 10px;
}
#app > div {
border: solid black 2px;
padding: 10px;
margin-top: 10px;
}
</style>
运行示例 »