时间戳

首页 > 解决方案 > Vue 3 –渲染不能动画的非元素根节点

vue.js - Vue 3 –渲染不能动画的非元素根节点

问题描述

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

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

标签： vue.jsvue-component

解决方案

不。

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

是的。

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

如果您没有在“模板”标签内使用“div”标签，您将得到同样的错误。（顺便说一句，可以使用除 div 标签以外的其他标签）

推荐阅读