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()
    }
  }
}

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

Answer 1

不。

\n

<template>\n  <div></div>\n  <div>~someone~</div>\n</template>\n

\n

是的。

\n

<template>\n  <div>\n  \xe3\x80\x80\xe3\x80\x80<div></div>\n    ~someone~\n  </div>\n</template>\n

\n

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

\n

Answer 2

转换需要单个子节点。因此，您可以将<component>标签包装在 a 内<div>，但是， a<div>内的普通内容<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.