Vue 3 – <过渡>渲染不能动画的非元素根节点

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

<router-view v-slot={组件}"><过渡名称=淡入淡出";模式=出入"；出现><component :is=Component"></component></过渡></路由器视图>

Page.vue 文件结构简单，但它也有一个基本的 sliderjs 组件，该组件会引发错误 <Transition>渲染无法动画的非元素根节点.如果transition标签被移除，一切正常.

<div v-if=page.isReady"><刷卡器><swiper-slide>幻灯片 1</swiper-slide><swiper-slide>幻灯片 2</swiper-slide><swiper-slide>幻灯片 3</swiper-slide></swiper></div>

https://swiperjs.com/vue/

该文件还具有以下内容:

import { Swiper, SwiperSlide } from 'swiper/vue';导入'swiper/swiper.scss'；导出默认{组件: {刷卡器，SwiperSlide，},设置 () {返回 {页面:使用页面()}}}

有什么技巧可以解决这个错误吗?感谢您的任何提示！

解决方案

没有.

<template><div></div><div>~某人~</div></模板>

是的.

<template>
<div></div>~某人~</div></模板>

如果您不使用div"；标签就在模板"内标签，你会得到同样的错误.(顺便说一句，可以使用除 div 标签以外的其他标签)

App.vue has a transition tag to fade the pages out and in.

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

The Page.vue file has a simple structure, however it also has a basic sliderjs component which throws the error <Transition> renders non-element root node that cannot be animated. If the transition tag is removed, everything works fine.

<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/

The file also has the following:

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

export default {
  components: {
    Swiper,
    SwiperSlide,
  },
  
  setup () {
    return {
      page: usePage()
    }
  }
}

Is there any trick to fix the error? Thanks for any tips!

解决方案

No.

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

Yes.

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

If you do not use a "div" tag just inside the "Template" tag, you will get the same error. (By the way, it was possible to use other than div tags)