【Vue3】解决 Component inside `＜Transition＞` renders non-element root node that cannot be animated. 的问题

heo

7048人浏览 · 2023-09-16 17:41:16

heo · 2023-09-16 17:41:16 发布

Component inside <Transition> renders non-element root node that cannot be animated. 组件呈现不能被动画化的非元素根结点。

我们在 layout 整体布局下，为各个局部页面添加了动画显示页面的功能，但结果却是不能显示该动画效果。

解决方法：在 template 元素内部添加 div 元素（即将 template 内部所有元素放入一个根节点 div 中，类似于 Vue2 那样），问题得以解决~

乐奇 Rokid 开放社区

更多推荐

从对话到行动：用 AIUI 构建「喝水节奏教练」

「喝水节奏教练」是专为Rokid AI眼镜设计的本地化饮水记录智能体，通过自然语言指令实现“记一杯”“查进度”“撤销错误”等操作，数据全程本地存储。基于意图驱动的单页面UI，结合语音识别与A2UI动态渲染，支持快速记录、实时核对与修正，不依赖云端或健康数据，专注轻量可信的饮水节奏管理。

乐奇 Rokid 开放社区

智能眼镜市场全景解析：从技术演进到产业格局

本文系统梳理智能眼镜市场，涵盖产品形态、技术演进、市场规模、产业链结构及竞争格局。指出智能眼镜正从音频交互向AR显示与空间计算演进，受AI大模型、供应链成熟与生态延伸驱动，呈现分层发展态势。虽面临场景刚需不足、续航重量矛盾与隐私挑战，但B端应用先行、AI原生设计与标准完善将推动行业迈向规模化渗透，未来需关注核心技术突破与真实使用数据。