文章目录
<Transition> 组件
当我们想要在应用程序中删除或添加元素时使用 v-if 或 v-show 来制作动画时，Vue 为我们提供了内置的<Transition> 组件，因为使用普通的 CSS 动画很难做到这一点。
让我们首先创建一个应用程序，其中一个按钮可以添加或删除
标签：
示例
App.vue：
<template>
<h1>添加/删除 <p> 标签</h1>
<button @click="this.exists = !this.exists">{
{btnText}></button><br>
<p v-if="exists">Hello World!</p>
</template>
<script>
export default {
data() {
return {
exist: 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>添加/删除 <p> 标签</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 {
exist: 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>
总结
本文介绍了Vue <Transition> 组件的使用，如有问题欢迎私信和评论