侧边栏壁纸
  • 累计撰写 198 篇文章
  • 累计创建 105 个标签
  • 累计收到 36 条评论
vue

Component inside renders non-element root node that cannot be animated.

神兵小将
2022-04-16 / 0 评论 / 0 点赞 / 78 阅读 / 933 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2022-04-16,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

问题

项目使用vite2+vue3,在App.vue当中使用了页面过渡动画Transition, 控制台出现警告信息

runtime-core.esm-bundler.js:38 [Vue warn]: Component inside <Transition> renders non-element root node that cannot be animated. 
  at <Admin onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > key= {fullPath: "/", path: "/", query: {…}, hash: "", name: "index", …} > 
  at <BaseTransition appear=false persisted=false mode=undefined  ... > 
  at <Transition name="slide" > 
  at <RouterView> 
  at <App>

image-1650099257863

<Transition> renders non-element root node that cannot be animated. 这句话的意思是:

<Transition>中的组件渲染无法设置动画的非元素根节点。

针对这个问题解决方法是在index.vue 当中使用一个<div>标签,将index.vue所有标签包裹起来即可消除这个错误:

我的index.vue

  <template>
  	<div>index</div>
  	<router-view></router-view>
</template>

改为:

<template>
	<div>
  		<div>index</div>
  		<router-view></router-view>
    </div>
</template>

只需要在外面套一层div即可。

0

评论区