更多ruoyi-nbcio功能请看演示系统
gitee源代码地址
前后端代码： https://gitee.com/nbacheng/ruoyi-nbcio
演示地址：RuoYi-Nbcio后台管理系统 http://218.75.87.38:9666/
更多nbcio-boot功能请看演示系统
gitee源代码地址
后端代码： https://gitee.com/nbacheng/nbcio-boot
前端代码：https://gitee.com/nbacheng/nbcio-vue.git
进入主页后报下面的警告信息
[Vue warn]: Extraneous non-props attributes (mode) were passed to component but could not be automatically inherited because component renders fragment or text root nodes. at <TransitionGroup name="fade-transform" mode="out-in" > at <Index> at <AppMain> at <Index onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > at <RouterView> at <ElConfigProvider locale= {name: 'zh-cn', el: {…}} size="default" > at <App>
问题出在 <transition-group> 组件上尝试传递了一个名为 mode 的非 props 属性，但是该属性无法直接被 <transition-group> 组件继承，因为该组件渲染的是片段或文本根节点。这会导致 Vue 报错。
一、处理方法
1.、移除不必要的属性
简单的解决方法是移除 <transition-group> 组件上的不必要的 mode 属性。mode 属性是用于设置过渡模式的，但在 Vue 3 中，默认的过渡模式已经改变了。
移除前：
<transition-group name="fade-transform" mode="out-in"></transition-group>
移除后：
<transition-group name="fade-transform"></transition-group>
2、 使用全局配置
Vue 提供了全局配置来设置过渡的模式，可以在 Vue 的创建实例时配置，这样可以避免在每个 <transition-group> 中重复设置。
import { createApp } from 'vue'; import App from './App.vue'; // 预设动画 import animate from './animate'; const app = createApp(App); app.config.globalProperties.animate = animate; app.mount('#app');
然后在组件中，不再需要传递 mode 属性：
<transition-group name="fade-transform"></transition-group>
其中上面的animate.ts文件如下
// 前缀 const animatePrefix = 'animate__animated '; // 开启随机动画 随机动画值 const animateList: string[] = [ animatePrefix + 'animate__pulse', animatePrefix + 'animate__rubberBand', animatePrefix + 'animate__bounceIn', animatePrefix + 'animate__bounceInLeft', animatePrefix + 'animate__fadeIn', animatePrefix + 'animate__fadeInLeft', animatePrefix + 'animate__fadeInDown', animatePrefix + 'animate__fadeInUp', animatePrefix + 'animate__flipInX', animatePrefix + 'animate__lightSpeedInLeft', animatePrefix + 'animate__rotateInDownLeft', animatePrefix + 'animate__rollIn', animatePrefix + 'animate__rotateInDownLeft', animatePrefix + 'animate__zoomIn', animatePrefix + 'animate__zoomInDown', animatePrefix + 'animate__slideInLeft', animatePrefix + 'animate__lightSpeedIn' ]; // 关闭随机动画后的默认效果 const defaultAnimate = animatePrefix + 'animate__fadeIn'; // 搜索隐藏显示动画 const searchAnimate = { enter: '', leave: '' }; // 菜单搜索动画 const menuSearchAnimate = { enter: animatePrefix + 'animate__fadeIn', leave: animatePrefix + 'animate__fadeOut' }; // logo动画 const logoAnimate = { enter: animatePrefix + 'animate__fadeIn', leave: animatePrefix + 'animate__fadeOut' }; export default { animateList, defaultAnimate, searchAnimate, menuSearchAnimate, logoAnimate };
3、 使用 <transition> 组件
如果你只需要简单的过渡效果，可以考虑使用 <transition> 组件而不是 <transition-group>。
<transition name="fade-transform" mode="out-in"></transition>
二.、什么是<TransitionGroup> ？
<TransitionGroup> 是一个内置组件，用于对 v-for 列表中的元素或组件的插入、移除和顺序改变添加动画效果。 <TransitionGroup> 拥有与 <Transition> 除了 mode 以外所有的 props，并增加了两个额外的 props： interface TransitionGroupProps extends Omit<TransitionProps, 'mode'> { /** * 如果未定义，则渲染为片段 (fragment)。 */ tag?: string /** * 用于自定义过渡期间被应用的 CSS class。 * 在模板中使用 kebab-case，例如 move-class="xxx" */ moveClass?: string }
三、和 <Transition> 的区别
<TransitionGroup> 支持和 <Transition> 基本相同的 props、CSS 过渡 class 和 JavaScript 钩子监听器，但有以下几点区别：
默认情况下，它不会渲染一个容器元素。但你可以通过传入 tag prop 来指定一个元素作为容器元素来渲染。
过渡模式（mode属性）在这里不可用，因为我们不再是在互斥的元素之间进行切换。
列表中的每个元素都必须有一个独一无二的 key属性。
CSS 过渡 class 会被应用在列表内的元素上，而不是容器元素上。
提示：当在 DOM 内模板中使用时，组件名需要写为 <transition-group>。
四.、了解 Vue 3 过渡的改变
Vue 3 中对过渡系统进行了一些改进，包括对默认过渡模式的更改。阅读 Vue 3 的官方文档来了解这些改变，以便更好地使用过渡和动画功能。
五.、查看文档和示例
确保你的代码与 Vue 3 的最新文档和示例保持一致，这有助于避免一些常见的问题并获得正确的用法示例。
在解决这个问题时，应该注意 Vue 的版本和相关文档，确保你所使用的方法与你的 Vue 版本相匹配。
![[vue2/vue3] -- 深入剖析v-model的原理、父子组件双向绑定的多种写法](https://ucc.alicdn.com/pic/developer-ecology/iwb4s2erfjeee_d14da44e4e4d4f2ab6c458dc8c34c9f5.png?x-oss-process=image/resize,h_160,m_lfit)
