vue实现多个元素或多个组件之间动画效果

最新推荐文章于 2023-09-09 15:52:39 发布

霜如明月

最新推荐文章于 2023-09-09 15:52:39 发布

阅读量1.2k

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/q3254421/article/details/84593430

版权

本文探讨了在Vue中如何实现多个元素和组件之间的过渡动画。通过设置不同的key值避免DOM复用，从而实现动画效果。同时介绍了transition组件的mode属性，用于控制元素的进出顺序，以及动态组件的使用来完成多个组件的过渡。

摘要由CSDN通过智能技术生成

多个元素的过渡

<style>
　　.v-enter,.v-leave-to{
　　　　opacity: 0;
　　}
　　.v-enter-acitve,.v-leave-active{
　　　　opacity: opacity 1s;
　　}
</style>
<div id='app'>
　　<transition>
　　　　<div v-if='show'>hello world</div>
　　　　<div v-else>bye world</div>
　　</transition>
　　<button @click='handleClick'>切换</button>
</div>
<script>
var vm = new Vue({
　　el:'#app',
　　data:{
　　　　show:true
　　},
　　methods:{
　　　　handleClick:function(){
　　　　　　this.show = !this.show;
　　　　}
　　}
})
</script>
//前端全栈学习交流圈：866109386
//面向1-3经验年前端开发人员
//帮助突破技术瓶颈，提升思维能力

按照之前的写法方式，渐隐渐出的效果并没有出现该有的效果，那么为什么呢？
在if else两个元素切换的时候，会尽量的复用dom，正是vue，dom的复用，导致动画的效果不会出现，如果想要vue不去复用dom，之前也说过，怎么做呢，给两个div不同的key值就行了