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

解决Vue<Transition>非元素根节点动画问题
原创 已于 2023-10-17 16:25:18 修改 · 614 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #javascript #html #vue.js

于 2023-10-17 15:29:22 首次发布
文章描述了在Vue项目中遇到的警告，即<Transition>组件渲染出不能动画化的非元素根节点。解决方法是将Vue元素置于div容器内，使其不是顶层根节点。通过添加一层div包裹，可以修复这个问题并实现动画效果。

如上图所示警告提示，然后任何一个页面菜单都显示不出来了。第一行提示内容如下：

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

有道翻译过来是说  <Transition>中的组件呈现不能动画化的非元素根节点。

然后网上搜索出来有的解决方案是说，需要给vue页面上层加div 

大致意思是要用div做根节点，把vue的元素包起来，不让vue元素直接作为根节点，在<template>元素下加一层div即可，如下图

最后结果如下：

vue3 出现 Component inside ＜Transition＞ renders non-element root node that cannot be animated.
任磊
02-24 2万+
项目使用vite脚手架+vue3，在根组件App.vue当中使用了页面过渡动画 首页index.vue 代码 结果控制台出现 Component inside <Transition> renders non-element root node that cannot be animated. 这句话的意思是： <Transition>中的组件渲染无法设置动画的非元素根节点。 针对这个问题解决方法是在index.vue 当中使用一个<div>标签，将..
vue3警告：Component inside ＜Transition＞ renders non-element root node that cannot b
每天都要努力学习哦~~
12-14 1194
两天内一直被一个bug折磨，终于发现了问题的所在。决定做一个小记录，以此加深记忆！从代码中可以看出，存在3个根节点，注意（template不代表根节点）。这个warn是因为组件中包裹的不是一个单节点元素。标签本身不会创建真实DOM元素 直接包裹在。中的，就是我们自己写的组件，也就是传给。
quasar使用keep alive警告 Component inside ＜Transition＞ renders non-element root node
前端小白到专家的博客
06-20 1980
在项目中使用缓存来保持页面不被更新，但是在使用keep-alive时会给出警告。vue3缓存与vue2缓存不一样，需要注意。下面是代码。 然后浏览器给出如下警告：
Component inside ＜Transition＞ renders non-element root node that cannot be animated. 并出现空白页
m0_72167535的博客
12-05 9297
在我的vue中，template中除了有一个div还有另一个组件，所以有两个节点，因为导致了vue报警出错。中，每个Vue组件只能有一个根节点，也就是说在template标签中只能包含一个根元素。出现空白画面，首次进入后可以显示画面内容，但是跳转到其他画面后，其他画面打不开，显示空白页，然后再跳转到之前能打开的画面也显示空白页。就是确保在template下，只放一个div节点，其他内容全部放在这个div下，不要在template下放两个同层的div。错误原因在于在Vue 3中，
解决 Component inside ＜Transition＞ renders non-element root node that cannot be animated 问题
热门推荐
A_KID的博客
07-06 1万+
今天在用Arco的组件库的时候遇到一个问题： 在route路由中引入一个页面 页面中有多个根节点 此时切换页面会出现白屏的情况，控制台会出现这个警告 这个只是一个页面切换时候的动画过渡组件，大不了干掉它 文件所在路径......
Component inside <Transition> renders non-element root node that cannot be animated.
01-21
当遇到 `Component inside <Transition> renders non-element root node that cannot be animated` 的警告时，这通常是因为 `<Transition>` 组件内部的内容不是单一的 DOM 元素。为了使过渡效果正常工作，...
Component inside <Transition> renders non-element root node that cannot be animated. at <FileItemCompnent key="1758509608370-0" fileItem=
09-23
出现 'Component inside <Transition> renders non-element root node that cannot be animated.' 错误，通常是因为被 `<Transition>` 包裹的组件的模板根节点不符合要求。在 Vue 中，`<Transition>` 组件要求其包裹...
runtime-core.esm-bundler.js:51 [Vue warn]: Component inside <Transition> renders non-element root node that cannot be animated.
最新发布
09-23
首先，用户的问题是关于Vue.js中的警告："Component inside <Transition> renders non-element root node that cannot be animated." 中文意思是"组件在<Transition>内渲染非元素根结点，不能被动画化"。用户想要...
[Vue warn]: Component inside ＜Transition＞ renders non-element root node that cannot be animated.
weixin_45074627的博客
10-16 1555
中的组件不能呈现动画的非元素根节点。也就是说，Transition包裹的必须是一个单根的组件。将非单根节点变为单根节点即可。
解决报错-Component inside ＜Transition＞ renders non-element root node that cannot be animated.
royal_cf的博客
05-06 734
最后发现，是因为template的根节点没有，所以解决方案就是在最外层包一个div即可。内部的组件<Transition>渲染无法进行动画处理的非元素根节点。今天遇到一个报错，如上图，翻译过来是这样的。
vue3 Component inside ＜Transition＞ renders non-element root node that cannot be animated.
weixin_59916662的博客
11-05 1498
vue3 Component inside renders non-element root node that cannot be animated.
【Vue3】解决 Component inside `＜Transition＞` renders non-element root node that cannot be animated. 的问题
小秀的博客
09-16 6958
renders non-element root node that cannot be animated. 组件呈现不能被动画化的非元素根结点。我们在 layout 整体布局下，为各个局部页面添加了动画显示页面的功能，但结果却是不能显示该动画效果。中，类似于 Vue2 那样），问题得以解决~内部所有元素放入一个根节点。
vue 页面跳转路由 不显示内容Component inside ＜Transition＞ renders non-element root node that cannot be animated.
limonero
12-17 2168
显示信息： Component inside <Transition> renders non-element root node that cannot be animated. 原因： warn是因为组件中包裹的不是一个单节点元素。 <template> <a-layout-content class="vab-content"> <router-view v-slot="{ Component }...
warn]: Component inside <Transition> renders non-element root node that cannot be animated.
m0_50080847的博客
12-06 1930
因为比较简单先说解决方法： 用一个 div 把 过渡到的 代码(组件代码) 包起来即可 详情： 用到 transition: (提升用户体验组件动画) 警告信息： 过渡的 组件 代码： 解决：(用div 把所有 代码包起来) 期望结果： 由于vue3 支持碎片写法没错，但是 transition 内置要求需要 包裹 dom ...
vue Component inside ＜Transition＞ renders non-element root node that cannot be animated.
前端的路上
04-08 1078
警告：没有用根节点，无法使用动画 在router-view上 使用div标签包住， <div> <router-view v-slot="{ Component }"> <!-- keep-alive 缓存 --> <keep-alive include="addTemp,simpleTemp"> <component :is="Component" /> </keep-...
vue3警告：Component inside ＜Transition＞ renders non-element root node that cannot be animated
weixin_40837048的博客
08-02 1708
vue3警告：Component inside ＜Transition＞ renders non-element root node that cannot be animated 的解决方法
vue3警告：Component inside ＜Transition＞ renders non-element root node that cannot be animated.
qq_36759972的博客
08-09 336
问题通常会发生在切出去当前组件的时候会白屏，无法显示当前组件，还要注意的一个点是，用标签包裹住之后，在外边不能有同级的标签，甚至是！已经注释了的html标签，因为被注释过的html只是不会被显示到界面上，但是仍会插入到标签之中。可能这个是 的一个bug。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值