Vue 3 - <Transition> 渲染非元素根节点无法动画

Question

App.vue 有一个 transition 标签来淡出和淡入页面。

 <router-view v-slot="{ Component }">
   <transition name="fade" mode="out-in" appear>
      <component :is="Component"></component>
   </transition>
</router-view>

Page.vue 文件结构简单，但它也有一个基本的 sliderjs 组件，它会抛出错误 <Transition> renders non-element root node that cannot be animated. 如果删除了 transition 标签，一切正常。

 <div v-if="page.isReady">
   <swiper>
      <swiper-slide>Slide 1</swiper-slide>
      <swiper-slide>Slide 2</swiper-slide>
      <swiper-slide>Slide 3</swiper-slide>
   </swiper>
</div>

https://swiperjs.com/vue/

该文件还具有以下内容：

 import { Swiper, SwiperSlide } from 'swiper/vue';
import 'swiper/swiper.scss';

export default {
  components: {
    Swiper,
    SwiperSlide,
  },

  setup () {
    return {
      page: usePage()
    }
  }
}

有什么技巧可以修复错误吗？感谢您的任何提示！

原文由 To E 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

不。

 <template>
  <div></div>
  <div>~someone~</div>
</template>

是的。

 <template>
  <div>
  　　<div></div>
    ~someone~
  </div>
</template>

如果您不在“Template”标签内使用“div”标签，您将得到同样的错误。 （顺便说一下，可以使用 div 标签以外的标签）

原文由 kon 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

转换需要单个子节点。 Therefore you can wrap the <component> tag inside a <div> , however, a plain <div> inside a <transition> won’t trigger the transition,但更改 key 属性。

我们可以通过获取路由名称来获取唯一键：

 <router-view v-slot="{ Component, route }">
  <transition name="fade" mode="out-in">
    <div :key="route.name">
      <component :is="Component"></component>
    </div>
  </transition>
</router-view>

这将有效地在具有不同名称的路由之间进行转换，但是如果您还想在具有不同参数的相同名称的路由之间进行转换，您可以使用 route.fullPath 而不是 route.name 作为 key 。

原文由 Edison Arango 发布，翻译遵循 CC BY-SA 4.0 许可协议