小编To *_*o E的帖子

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

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