文字隐藏需解耦布局与渲染：仅用 width 过渡易致溢出、错位或点击失效；应结合 transform: scaleX(0)、opacity: 0、pointer-events: none 及 overflow: hidden，确保不参与布局、无交互、无障碍干扰。
直接用 width + opacity 过渡文字，90% 的情况会出问题——不是动画卡顿，就是文字在收窄过程中突然“弹出来”或点击失效。真正可控的方式是把文字隐藏逻辑和布局收缩解耦。
为什么只写 transition: width 0.3s 文字会露出来
浏览器对 width 做过渡时，只缩容器，不干预内部内容渲染。如果文字容器没设 overflow: hidden，或父元素有 white-space: nowrap，文字就会在宽度变小过程中溢出、折行错位，甚至撑开侧边栏高度。
-
overflow: hidden必须加在侧边栏自身（不是子元素），否则过渡中文字仍可“探头” - 避免给文字容器设
min-width或固定padding，它们会抵抗width: 0 - 如果用了
flex布局，侧边栏默认有min-width: auto，得显式写min-width: 0
opacity 和 width 动画不同步的根源
两个属性虽然都写了 transition，但浏览器计算时机不同：opacity 是合成层动画，width 触发重排。哪怕 duration 和 timing function 完全一致，人眼也能察觉错位——尤其在 Safari 上更明显。
- 别写
transition: width 0.3s, opacity 0.3s，改用统一控制：先缩宽，等动画快结束时再淡出 - 用 JavaScript 监听
transitionend，在width动画完成后再加opacity: 0类 - 或者干脆放弃
opacity，用visibility: hidden+transition-delay控制显示时机
文字隐藏该用 width 还是 transform
纯靠 width: 0 隐藏文字风险高：某些字体在极窄宽度下渲染异常，且缩到 0 后内部链接无法聚焦。更稳妥的是用 transform: scaleX(0) 做视觉压缩，再配合 opacity 和 pointer-events: none。
-
transform不触发重排，性能更好，动画也更顺滑 - 必须同步设置
overflow: hidden，否则缩放后文字可能从边缘“漏出” - 不要单独用
transform: scaleX(0)响应点击——它保留命中框，用户点不到实际按钮，得加pointer-events: none - 折叠状态推荐组合：
transform: scaleX(0); opacity: 0; pointer-events: none;
最容易被忽略的一点：文字隐藏不是“让它看不见”，而是“让它不参与布局、不响应交互、不干扰可访问性”。所以别只盯着 CSS 动画效果，得检查键盘焦点是否还能进入、屏幕阅读器是否跳过、触摸热区是否还有效——这些才是折叠菜单真正落地的门槛。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
