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

最新推荐文章于 2024-06-01 15:46:07 发布
最新推荐文章于 2024-06-01 15:46:07 发布
阅读量124 收藏 1
点赞数
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Yydemo1/article/details/132197309
版权

警告截图

这个组件出的问题

 

这个的原因是因为在router-view处使用了transition组件包住。需要组件有一个根节点才能起作用

解决方法：

 

 外层加上div 解决。

 

鱼尾uuui
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
vue-transition-component:为vue.js组件提供GreenSock过渡功能
05-09
为vue.js组件提供GreenSock过渡功能。 安装 yarn add vue-transition-component npm i -S vue-transition-component 文献资料 例子 我提供了一个示例设置，您可以在其中看到过渡控制器的运行情况，按照以下步骤运行项目： git clone https://github.com/larsvanbraam/vue-transition-component.git cd vue-transition-component/example yarn yarn dev 打开浏览器localhost:8080 或单击以在线预览 建造 为了构建vue-transition-component，请确保已安装和Node.js。 克隆仓库的副本： git clone https://github.com/lar
v-shared-element:Vue.js的声明式共享元素转换
03-09
v共享元素 页面之间的声明式共享元素转换。 在引擎盖下使用的东西。 v3.0.0已经发布！ 如果要从v2.x升级，请参考变更以获取（简短的）重大更改列表。 该示例的源代码可以在上找到。 指数 安装 npm $ npm i v-shared-element 或者 CDN < script src =" https://unpkg.com/illusory " > </ script > < script src =" https://unpkg.com/v-shared-element " > </ script > 注册插件 Vue.js + Vue路由器 //main.js import Vue from 'vue' import { SharedElementRouteGuard , SharedElementDirective } from 'v-shar
[Vue warn]: Component inside ＜Transition＞ renders non-element root node that cannot be animated.
m0_56082495的博客
04-09 278
vue3警告，出现的问题就是多个标签页同时存在的时候，切换回旧的标签页会出现一片空白的状况，F12看控制台会出现这个警告。查看了一些资料发现问题出在使用的transition组件上，这个组件里面只能包裹一个单根元素。
vue3警告：Component inside ＜Transition＞ renders non-element root node that cannot be animated
weixin_40837048的博客
08-02 1089
vue3警告：Component inside ＜Transition＞ renders non-element root node that cannot be animated 的解决方法
vite、vue3警告：Component inside ＜Transition＞ renders non-element root node that cannot be animated.
大香蕉的博客
04-12 1768
一、问题代码 <template> <section> <router-view v-slot="{ Component }"> <transition name="fade" mode="out-in"> <component :is="Component" :key="$route.path" /> </transition> </router-view>
vue Component inside ＜Transition＞ renders non-element root node that cannot be animated.
前端的路上
04-08 990
警告：没有用根节点，无法使用动画 在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.
热门推荐
任磊
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>标签，将..
vue 页面跳转路由 不显示内容Component inside ＜Transition＞ renders non-element root node that cannot be animated.
limonero
12-17 1794
显示信息： 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 }...
Component inside ＜Transition＞ renders non-element root node that cannot be animated.
中老年程序员
10-17 243
大致意思是要用div做根节点，把vue的元素包起来，不让vue元素直接作为根节点，在元素下加一层div即可，如下图。有道翻译过来是说 中的组件呈现不能动画化的非元素根节点。如上图所示警告提示，然后任何一个页面菜单都显示不出来了。然后网上搜索出来有的解决方案是说，需要给vue页面上层加div。
warn]: Component inside <Transition> renders non-element root node that cannot be animated.
m0_50080847的博客
12-06 1829
因为比较简单先说解决方法： 用一个 div 把 过渡到的 代码(组件代码) 包起来即可 详情： 用到 transition: (提升用户体验组件动画) 警告信息： 过渡的 组件 代码： 解决：(用div 把所有 代码包起来) 期望结果： 由于vue3 支持碎片写法没错，但是 transition 内置要求需要 包裹 dom ...
Component inside ＜Transition＞ renders non-element root node that cannot be animated. 并出现空白页
m0_72167535的博客
12-05 3310
在我的vue中，template中除了有一个div还有另一个组件，所以有两个节点，因为导致了vue报警出错。中，每个Vue组件只能有一个根节点，也就是说在template标签中只能包含一个根元素。出现空白画面，首次进入后可以显示画面内容，但是跳转到其他画面后，其他画面打不开，显示空白页，然后再跳转到之前能打开的画面也显示空白页。就是确保在template下，只放一个div节点，其他内容全部放在这个div下，不要在template下放两个同层的div。错误原因在于在Vue 3中，
【Vue3】解决 Component inside `＜Transition＞` renders non-element root node that cannot be animated. 的问题
小秀的博客
09-16 2632
renders non-element root node that cannot be animated. 组件呈现不能被动画化的非元素根结点。我们在 layout 整体布局下，为各个局部页面添加了动画显示页面的功能，但结果却是不能显示该动画效果。中，类似于 Vue2 那样），问题得以解决~内部所有元素放入一个根节点。
vue3警告： [Vue warn]: Component inside renders non-element root node that cannot be animat
qq_45909266的博客
04-26 459
愿所有工程师不因AI的逐渐强大而焦虑，要坚信，能替代我们的，只有我们自己的惰性和停滞不前~~
解决 Component inside ＜Transition＞ renders non-element root node that cannot be animated 问题
qq_58671311的博客
09-29 1186
解决 Component inside renders non-element root node that cannot be animated 问题
书籍学习|基于SprinBoot+vue的书籍学习平台(源码+数据库+文档)
JIngJaneIL的博客
05-28 1194
首先,论文一开始便是清楚的论述了平台的研究内容。其次,剖析平台需求分析,弄明白“做什么”,分析包括业务分析和业务流程的分析以及用例分析,更进一步明确平台的需求。然后在明白了平台的需求基础上需要进一步地设计平台,主要包罗软件架构模式、整体功能模块、数据库设计。本项目软件架构选择B/S模式和java技术，总体功能模块运用自顶向下的分层思想。再然后就是实现平台并进行代码编写实现功能。论文的最后章节总结一下自己完成本论文和开发本项目的心得和总结。通过书籍学习平台将会使书籍学习各个方面的工作效率带来实质性的提升。
Vue3实战笔记（52）—Vue 3封装持仓分析饼图
山花的博客
05-30 505
接上文，封装持仓分析饼图。封装好几个组件，用于后续开发。把忧愁煮成茶，让它在心间慢慢沉淀，剩下的，便是清甜的回味。
vue3 vue-draggable-next 实现拖拽穿梭框效果
最新发布
游九尘的博客
06-01 288
【代码】vue3 vue-draggable-next 实现拖拽穿梭框效果。
elemnt ui 时间选择器。 当前日期往前推6个月以前的的不可选择
IT13333的博客
05-28 327
【代码】elemnt ui 时间选择器。当前日期往前推6个月以前的的不可选择。
Component inside <Transition> renders non-element root node that cannot be animated.
01-10
这句话的意思是，在`<Transition>`组件内部的组件渲染了一个非元素的根节点，这个根节点无法进行动画处理。 这个问题可能是由于在`<Transition>`组件中使用了一个非元素的根节点导致的。在你提供的代码中，`<router...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值