美文网首页
vue动画过渡-transition-标签

vue动画过渡-transition-标签

作者: MuYs | 来源:发表于2021-05-17 14:41 被阅读0次

Vue 提供了 transition 的封装组件,在下列情形中,可以给任何元素和组件添加进入/离开过渡

  • 条件渲染 (使用 v-if)
  • 条件展示 (使用 v-show)
  • 动态组件
  • 组件根节点

我觉得vue官网说的挺详细了哈哈
进入/离开 & 列表过渡

vue3逼死强迫症router-view警告解决方案

<transition mode="out-in">
    <router-view/>
</transition>
//类似的警告 <router-view> can no longer be used directly inside <transition>

//因为vue2->vue3的版本问题,可以改成以下写法
<router-view v-slot="{ Component }">
  <transition mode="out-in">
    <keep-alive>
      <component :is="Component "/>
    </keep-alive>
  </transition>
</router-view>

相关文章

网友评论

      本文标题:vue动画过渡-transition-标签

      本文链接:https://www.haomeiwen.com/subject/vgnrdltx.html