Vue 过渡适用于路由器视图，但不适用于组件内部

Question

当我设置一个典型的路由转换时，一切都按预期工作

<transition name="view" mode="out-in">
  <router-view />
</transition>

但如果我尝试将过渡放在视图中，则过渡不起作用

<template>
  <transition name="view" mode="out-in">
    <main>
      <...>
    </main>
  </transition>
</template>

任何想法为什么会出现这种情况？

Answer 1

在我看来，问题在于<main> 元素没有进入或离开，因此它没有动画。您可能正在尝试对 <main> 元素中的某些内容进行动画处理，而 <transition> 伪元素并未将其作为目标。

我的建议是使用 transition 封装正在切换 (v-if) 或可见性切换 (v-show) 的元素

<template>
  <main>
    <transition name="view" mode="out-in">
      <...something with a v-if or a v-show>
    </transition>
  </main>
</template>

另外，如果您使用的是列表/数组 (v-for)，您应该使用 transition-group

文档：https://vuejs.org/v2/guide/transitions.html