vue.js - Vue 3 - 渲染无法动画的非元素根节点

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 文件有一个简单的结构，但它也有一个基本的 Slidejs 组件，它会抛出错误 <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

不。

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

是的。

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

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