Vue 中多个元素或组件的过渡动画
实现多个元素的过渡动画的效果
<!DOCTYPE html><html lang="en"><head> < charset="UTF-8"> < > Vue 中多个元素或组件的过渡动画</ > < src = "./vue.js"></ > <!-- < src = "./velocity.js"></ > --> <style> .v-enter,.v-leave-to{ opacity:0; } .v-enter-active,.v-leave-active{ transition: opacity 1s; } </style></head><body> <div id ='root'> <transition> <div v-if ="show" key="hello">Hello World</div> <div v-else key="bye">Bye World</div> </transition> <button @click="handleClick">toggle</button> </div> < > var vm = new Vue({ el:'#root', data:{ show:true }, methods:{ handleClick:function(){ this.show = !this.show }, handleBeforeEnter:function(el){ el.style.opacity = 0; }, handleEnter:function(el,done){ Velocity(el,{opacity:1}, {duration:1000, complete:done }) }, handleAfterEnter:function(el){ console.log("动画结束") } } }) </ > </body></html>输出：点击--- Hello World 逐渐隐藏（1s），Bye World 直接出现---再次点击--- Bye World 逐渐隐藏 ，Hello World 直接出现
防止 Vue 中 div 出现复用，添加不同的 key值
<transition> <div v-if ="show" key="hello">Hello World</div> <div v-else key="bye">Bye World</div> </transition>
Vue 还提供 mode 配置参数 设置多个属性切换时的效果
（in-out : 多个元素显示时，先显示的元素先进入，要隐藏的元素才会被隐藏；）
<div id ='root'> <transition mode="in-out"> <div v-if ="show" key="hello">Hello World</div> <div v-else key="bye">Bye World</div> </transition>输出：点击--- Bye World 逐渐出现（1s）Hello World才隐藏---再次点击--- Hello World 逐渐出现 （1s），Bye World 才隐藏
（out-in : 多个元素显示时，要隐藏的元素先隐藏，要显示的元素先进入；）
<transition mode="out-in"> <div v-if ="show" key="hello">Hello World</div> <div v-else key="bye">Bye World</div> </transition>输出：点击--- Hello World逐渐隐藏（1s）Bye World 出现---再次点击--- Bye World 逐渐隐藏 （1s）， Hello World才出现
实现多个组件的过渡动画的效果
代码：
<!DOCTYPE html><html lang="en"><head> < charset="UTF-8"> < > Vue 中多个元素或组件的过渡动画</ > < src = "./vue.js"></ > <!-- < src = "./velocity.js"></ > --> <style> .v-enter,.v-leave-to{ opacity:0; } .v-enter-active,.v-leave-active{ transition: opacity 1s; } </style></head><body> <div id ='root'> <transition mode="out-in"> <child v-if ="show" ></child> <child-one v-else></child-one> </transition> <button @click="handleClick">toggle</button> </div> < > 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 } } }) </ > </body></html>输出：点击--- child逐渐隐藏（1s）child-one 出现---再次点击--- child-one 逐渐隐藏 （1s）， child才出现
通过动态组件来实现
component 来定义动态组件，通过 is 属性来将组件和定义的组件名做绑定，来控制执行那个组件
<!DOCTYPE html><html lang="en"><head> < charset="UTF-8"> < > Vue 中多个元素或组件的过渡动画</ > < src = "./vue.js"></ > <!-- < src = "./velocity.js"></ > --> <style> .v-enter,.v-leave-to{ opacity:0; } .v-enter-active,.v-leave-active{ transition: opacity 1s; } </style></head><body> <div id ='root'> <transition mode="out-in"> <component :is="type"></component> <!-- <child v-if ="show" ></child> <child-one v-else></child-one> --> </transition> <button @click="handleClick">toggle</button> </div> < > 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' }, methods:{ handleClick:function(){ this.type = this.type === 'child' ? 'child-one' : 'child' //type 是否为 child ，如果是则赋值为 child-one,不是则赋值为 child } } }) </ > </body></html>输出：点击--- child逐渐隐藏（1s）child-one 出现---再次点击--- child-one 逐渐隐藏 （1s）， child才出现
methods:{ handleClick:function(){ this.type = this.type === 'child' ? 'child-one' : 'child' }判断type 是否为 child ，如果是则赋值为 child-one,不是则赋值为 child
继续阅读与本文标签相同的文章
-
delegate委托的例子，实现对Form中控件的更新
2026-05-26栏目： 教程
-
C#中用WMI实现对驱动的查询
2026-05-26栏目： 教程
-
WMI_COM_API
2026-05-26栏目： 教程
-
C#窗体实现打开关闭VM虚拟机
2026-05-26栏目： 教程
-
C#控制台打开VM虚拟机
2026-05-26栏目： 教程