<transition>标签有两个属性,name 属性和 mode 属性。

transition里的 namefade 就是 .fade-enter-active,类名开头的 fade

<transition name="fade" mode="out-in">
   <router-view/>
   <router-view class="left" name="nav" />
   <router-view class="right" name="con" />
</transition>
      
.fade-enter-active, .fade-leave-active {
  transition:opacity .4s;
}
.fade-enter, .fade-leave-to {
  opacity:0;
}

注意:transition 里面的<div key="c">111222</div>的内容是不显示,如果要显示内容需要把 transition 标签换成 transition-group 标签,
transition-group 标里的所有子元素都要有key值,不然过渡效果是显示不出来的,而且每个子元素标签的key值是不一样的,不能重复。

<transition-group name="aaa" mode="in-out">
    <router-view key="d"/>
    <router-view class="left" name="nav" key="a" />
    <router-view class="right" name="con" key="b" />
    <div key="c">111222</div>
</transition-group>
Logo

前往低代码交流专区

更多推荐