（26）Vue 中的动画特效——⑤ Vue 中多个元素或组件的过渡 | Vue 基础理论实操
站长
· 阅读数 15
本文版权归 “公众号 | 前端一万小时” 所有，欢迎转载！
转载请注明出处，未经同意，不可修改文章内容。
🔥🔥🔥本系列文章已在“公众号 | 前端一万小时”更新完毕，有需要的小伙伴可按需前往查看。
🔥🔥🔥“前端一万小时”两大明星专栏——“从零基础到轻松就业”、“前端面试刷题”，已于本月大改版，合二为一，干货满满，欢迎点击公众号菜单栏各模块了解。
打开编辑器，准备好最简单的页面效果，点击“切换”可以显示和隐藏：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>前端一万小时-Vue 中多个元素或组件的过渡</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
<transition>
<div v-if="show">Hello，前端一万小时</div>
</transition>
<button @click="handleClick">切换</button>
</div>
<script>
var vm = new Vue({
el: "#root",
data: {
show: true
},
methods: {
handleClick: function() {
this.show = !this.show
}
}
})
</script>
</body>
</html>
1 多个元素的过渡
❓多个元素的过渡动画是什么？
答：即两个或以上元素之间的过渡。
1.1 使用 v-if 和 v-else 指令实现
通过 data 中 show 的值来确定显示在页面上的元素：当 show 是 true 的时候， Hello，前端一万小时 显示在页面上；当 show 是 false 的时候， Hi，前端一万小时 显示在页面上。
<head>
<meta charset="UTF-8">
<title>前端一万小时-Vue 中多个元素或组件的过渡</title>
<script src="./vue.js"></script>
<style> /* 2️⃣添加过渡效果，transition 标签没有 name，所以默认为 v 开头的类名； */
.v-enter,
.v-leave-to {
opacity: 0;
}
.v-enter-active,
.v-leave-acitve {
transition: opacity 1s;
}
</style>
</head>
<body>
<div id="root">
<transition>
<!-- 3️⃣分别给两个 div 上增加 key 值，防止 Vue 复用 DOM 导致无动画效果。 -->
<div v-if="show" key="hello">Hello，前端一万小时</div>
<div v-else key="hi">Hi，前端一万小时</div> <!-- 1️⃣增加一个 div，并添加 v-else； -->
</transition>
<button @click="handleClick">切换</button>
</div>
<script>
var vm = new Vue({
el: "#root",
data: {
show: true
},
methods: {
handleClick: function() {
this.show = !this.show
}
}
})
</script>
</body>
此时，在 transition 标签里包裹了两个元素，并且都有了过渡效果：
1.2 使用过渡模式
Vue 还提供了“过渡模式”来进行过渡，可以选择 out-in 或 in-out 。
1️⃣当 transition 上设置的 mode 参数为 in-out 时，显示的元素进来后，再隐藏另一个元素：
<transition mode="in-out"> <!-- ❗️在 transition 标签上添加 mode 设置为 in-out。 -->
<div v-if="show" key="hello">Hello，前端一万小时</div>
<div v-else key="hi">Hi，前端一万小时</div>
</transition>
2️⃣当 transition 上设置的 mode 参数为 out-in 时， 先隐藏显示的元素，再展示另一个元素：
<transition mode="out-in"> <!-- ❗️在 transition 标签上添加 mode 设置为 out-in。 -->
<div v-if="show" key="hello">Hello，前端一万小时</div>
<div v-else key="hi">Hi，前端一万小时</div>
</transition>
2 多个组件的过渡
❓如何实现多个组件的过渡？
答：可以直接使用过渡动画实现组件的过渡效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>前端一万小时-Vue 中多个元素或组件的过渡</title>
<script src="./vue.js"></script>
<style>
.v-enter,
.v-leave-to {
opacity: 0;
}
.v-enter-active,
.v-leave-acitve {
transition: opacity 1s;
}
</style>
</head>
<body>
<div id="root">
<!-- 3️⃣用 transition 包裹组件。 -->
<transition>
<!-- 2️⃣使用组件显示内容； -->
<child v-if="show"></child>
<child-one v-else></child-one>
</transition>
<button @click="handleClick">切换</button>
</div>
<script>
// 1️⃣定义两个组件：child 和 child-one；
Vue.component("child", {
template: "<div>child</div>"
})
Vue.component("child-one", {
template: "<div>child-one</div>"
})
var vm = new Vue({
el: "#root",
data: {
show: true
},
methods: {
handleClick: function() {
this.show = !this.show
}
}
})
</script>
</body>
</html>
❓如何通过动态组件的形式来实现过渡？
答：动态组件通过 component 标签定义，通过 is 属性关联的数据控制展示哪一个组件。
<body>
<div id="root">
<transition>
<!-- 2️⃣删除两个子组件； -->
<component :is="type"></component> <!-- 1️⃣添加 component 标签并绑定 is 属性； -->
</transition>
<button @click="handleClick">切换</button>
</div>
<script>
Vue.component("child", {
template: "<div>child</div>"
})
Vue.component("child-one", {
template: "<div>child-one</div>"
})
var vm = new Vue({
el: "#root",
data: {
type: "child" // 3️⃣删除 show 变量，添加 type，默认值为“child”；
},
methods: {
handleClick: function() {
this.type = this.type === "child" ? "child-one" : "child"
/*
4️⃣this.type 是否等于 child，如果等于 child，就让 this.type 等于 child-one，
否则就让它等于 child。
*/
}
}
})
</script>
</body>
祝好，qdywxs ♥ you！