这篇文章主要讲解了“Vue中transition标签如何使用”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“Vue中transition标签如何使用”吧！
transition 标签
transition 标签：Vue 的内置动画标签
作用：在 [插入] / [更新] / [移除] DOM 元素时，在合适的时候给元素添加样式类名（配合 CSS 样式使用，实现动画效果）
注意事项transition 标签只能包含 1 个元素；如果里面写了多个元素，则只生效第一个
transition 包裹的标签需要设置
v-show/
v-if属性控制元素的显示动画 CSS 样式对应的类名
进入：
.v-enter始状态、
.v-enter-to末状态、
.v-enter-active进入动画（Vue2）
离开：
.v-leave始状态、
.v-leave-to末状态、
.v-leave-active离开动画（Vue2）
进入：
.v-enter-from始状态、
.v-enter-to末状态、
.v-enter-active进入动画（Vue3）
离开：
.v-leave-from始状态、
.v-leave-to末状态、
.v-leave-active离开动画（Vue3）
配合 animation
<template>
<div>
<button @click="bol = !bol">隐藏/显示</button>
<!-- Vue 的内置动画标签 transition -->
<transition>
<!-- 只能包含 1 个元素 -->
<h2 v-show="bol">组件动画效果</h2>
<!-- 需要设置 v-show / v-if 属性控制元素的显示 -->
</transition>
</div>
</template>
<script>
export default {
name: "App",
data() {
return { bol: true };
},
};
</script>
<style>
/* 进入动画 */
.v-enter-active {
animation: move 1s;
}
/* 离开动画 */
.v-leave-active {
animation: move 1s reverse;
}
@keyframes move {
from {
transform: translateX(-100%);
}
to {
transform: translate(0);
}
}
</style>transition 标签的属性1、name 属性：用于自动生成 CSS 动画类名
如果
transition标签元素没有设置
name属性，则对应的动画类名为
v-XXX
如果设置了
name属性，则对应的动画类名为
属性值-XXX
2、appear 属性：一开始就生效显示动画
<template>
<div>
<button @click="bol = !bol">隐藏/显示</button>
<!-- transition 标签元素设置了 name、appear 属性 -->
<transition name="moveCartoon" appear>
<!-- 动画会在一开始便生效 -->
<h2 v-show="bol">组件动画效果</h2>
</transition>
</div>
</template>
<script>
export default {
name: "App",
data() {
return { bol: true };
},
};
</script>
<style>
/* 类名要对应回 name 的属性值 */
.moveCartoon-enter-active {
animation: move 1s;
}
.moveCartoon-leave-active {
animation: move 1s reverse;
}
@keyframes move {
from {
transform: translateX(-100%);
}
to {
transform: translate(0);
}
}
</style>当存在多个
tansition标签时，我们可以通过
name属性给各个
transition标签指定不同的 CSS 动画效果
配合 transition
<template>
<div id="app">
<button @click="bol = !bol">隐藏/显示</button>
<transition appear>
<h2 v-show="bol">组件动画</h2>
</transition>
</div>
</template>
<script>
export default {
name: "App",
data() {
return { bol: true };
},
};
</script>
<style>
/* 进入：始状态 */
.v-enter {
transform: translateX(-100%);
}
/* 进入：末状态 */
.v-enter-to {
transform: translateX(0);
}
/* 进入动画 */
.v-enter-active {
transition: 1s;
}
/* 离开：始状态 */
.v-leave {
transform: translateX(0);
}
/* 离开：末状态 */
.v-leave-to {
transform: translateX(-100%);
}
/* 离开动画 */
.v-leave-active {
transition: 1s;
}
</style>也可以将
transition: 1s;设置到标签上，就不用写
v-leave-active、
v-enter-active对应的样式了
h2 {
transition: 1s;
}
/* 进入：始位置 */
.v-enter {
transform: translateX(-100%);
}
/* 进入：末位置 */
.v-enter-to {
transform: translateX(0);
}
/* 离开：始位置 */
.v-leave {
transform: translateX(0);
}
/* 离开：末位置 */
.v-leave-to {
transform: translateX(-100%);
}transition-group 标签
transition 标签只能包含 1 个元素、 transition-group 标签可以包含多个元素
transition-group 标签里面的元素需要设置
key
属性，作为当前元素的唯一标识除此之外，其他用法都和 transition 标签一样
<template>
<div id="app">
<button @click="isEditing = !isEditing">切换</button>
<transition-group appear>
<h2 v-if="isEditing" key="save">Save</h2>
<h2 v-if="!isEditing" key="edit">Edit</h2>
</transition-group>
</div>
</template>
<script>
export default {
name: "App",
data() {
return { isEditing: true };
},
};
</script>
<style>
h2 {
transition: 0.5s;
position: absolute;
}
.v-leave {
opacity: 1;
}
.v-leave-to {
opacity: 0;
}
.v-enter {
opacity: 0;
}
.v-enter-to {
opacity: 1;
}
</style>如果只有两个元素，也可以给一个元素的
key设置不同的状态来代替
v-if和
v-else，上面的例子可以重写为：
<transition>
<h2 :key="isEditing">
{{ isEditing ? "Save" : "Edit" }}
</h2>
</transition>动画库 animate.css
下载：npm install animate.css
引入样式库：import "animate.css"
给指定的 transition 标签添加 name 属性 animate_animate、animate__bounce
配置 enter-active-class 属性，指定进入动画：
在样式库中挑一个进入的样式值，作为 enter-active-class 属性值配置 leave-active-class 属性，指定退出动画：
在样式库中挑一个退出的样式值，作为 leave-active-class 属性值
<template>
<div>
<button @click="bol = !bol">隐藏 / 显示</button>
<transition
name="animate__animated animate__bounce"
enter-active-class="animate__bounceIn"
leave-active-class="animate__bounceOut"
>
<h2 v-show="bol">动画库的使用</h2>
</transition>
</div>
</template>
<script>
import "animate.css"; // 引入样式库
export default {
name: "App",
data() {
return { bol: true };
},
};
</script>