Vue_多个元素或组件的过渡

最新推荐文章于 2024-11-12 15:57:45 发布

_dalianmiao

最新推荐文章于 2024-11-12 15:57:45 发布

阅读量976

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue_学习笔记

本文链接：https://blog.youkuaiyun.com/hani_wen/article/details/80810384

Vue_学习笔记专栏收录该内容

28 篇文章

订阅专栏

本文详细介绍了在Vue.js中如何实现元素之间的过渡动画效果。包括使用transition标签进行多个元素动画的切换，通过设置mode属性控制元素显示和隐藏的顺序，并展示了如何在组件中应用过渡效果。同时提供了具体的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一.多元素动画
如果transition标签里有多个元素做动画，比如做个toggle切换的效果。

<transition 
      name='fade'
      mode='in-out'>
   <div v-if="cssanimate" key='hello'>hello css animate5</div>
   <div v-else key='bye'>Bye css animate5</div>
</transition>
   <button @click='cssclick'>css动画5</button>
    //mode：来设置多个属性切换时的效果，in-out显示的元素先进来，
    //隐藏的元素后隐藏,out-in隐藏的元素先隐藏，显示的元素再显示

那可能会出现没有动画效果的情况，这是因为DOM元素的复用导致的，不复用可以用在元素上加key值

我们也可以给transition加上mode属性，mode属性的作用是：
mode：来设置多个属性切换时的效果，in-out显示的元素先进来，隐藏的元素后隐藏, out-in隐藏的元素先隐藏，显示的元素再显示
二.在组件中如何使用过渡？

  <transition 
     name='fade'
     mode='in-out'>
     <child-one v-if='cssanimate'></child-one>
     <child-two v-else></child-two>
 </transition>
   <button @click='clickanimate'>css动画</button>

可以这样写，也可以用组件来判断

<transition 
     name='fade'
     mode='in-out'>
   <component :is='showcomponents'></component>
 </transition>
   <button @click='clickanimate'>css动画</button>

methods:{
  clickanimate:function(){
    this.showcomponents = this.showcomponents == 'childone'?'childtwo':'childone'
 },
}