transform: scaley(0) 配合 transition 不生效主因是 display: none 中断动画，须改用 visibility: hidden + opacity: 0 或纯 transform 控制显隐；需设 transform-origin: top、避免 height 过渡、启用硬件加速（will-change）、慎用父级 transform；移动端需用 :focus-within 或 js 替代 :hover；文字模糊可改用 translatey + opacity 缓解。
下拉菜单用 transform: scaleY(0) 配合 transition 为什么经常不生效
因为 transform 对 display: none 元素完全无效，而多数人习惯在隐藏时写 display: none —— 这会直接中断过渡动画。必须全程保持元素在文档流中（比如用 visibility: hidden + opacity: 0 或仅靠 transform 控制显隐）。
推荐做法是：初始状态设为 transform: scaleY(0)、opacity: 0、visibility: hidden，展开时移除这些，并确保父容器有 overflow: hidden 防止内容溢出。
- 别在切换中修改
display，否则transition立刻失效 -
transform: scaleY(0)要配合transform-origin: top，否则缩放中心偏移导致“往上缩”或错位 - 若菜单含子项或 padding，
height不固定，就别用height过渡——它无法从height: 0平滑到height: auto
如何让 transform 滑出效果真正“平滑”，而不是卡顿或跳变
关键在两点：触发硬件加速 + 避免 layout 触发。直接对 transform 和 opacity 做过渡，浏览器会走合成层，性能好；一旦混入 margin、padding、height 或伪类内容变化，就可能强制重排（reflow），造成掉帧。
实操建议：
- 给下拉容器加
will-change: transform, opacity（仅在 hover/focus 激活前加，避免常驻开销） - 过渡属性写全：例如
transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease—— 第一个贝塞尔曲线专为“先快后慢再回弹”的滑出感优化 - 确保父级没有
transform（如scale或rotate），否则子元素的transform-origin会受其影响而偏移
:hover 触发的下拉菜单在移动端点按失效怎么办
CSS :hover 在多数触摸设备上只在首次点击后短暂触发，且无“悬停”概念，所以纯 :hover 下拉在手机上基本不可用。必须引入 JavaScript 控制类名，或改用 :focus-within 配合 tabindex。
轻量解法（无需 JS）：
- 给菜单父容器加
tabindex="0" - 用
&:focus-within替代:hover，例如：.menu:focus-within .dropdown { transform: scaleY(1); opacity: 1; visibility: visible; } - 同时保留
:hover供桌面端使用，形成自然降级：.menu:hover .dropdown, .menu:focus-within .dropdown { ... }
注意：iOS Safari 对 :focus-within 支持良好（iOS 15.4+），但旧版需 JS fallback。
为什么菜单滑出后文字模糊或出现锯齿
这是 transform: scaleY() 导致的亚像素渲染问题，尤其在非整数缩放比（如 125% 缩放）或 Retina 屏上明显。根本原因是 scaleY(0) → scaleY(1) 过程中，浏览器对字体做非均匀缩放，破坏了 hinting。
缓解方式有限但有效：
- 给下拉菜单加
backface-visibility: hidden，强制启用 GPU 合成，减少模糊 - 避免对含文字的容器直接做
scaleY，改用max-height+overflow: hidden（但要预估最大高度，且动画不如 transform 流畅） - 更稳妥的做法：用
transform: translateY()替代scaleY，配合opacity，例如从transform: translateY(-10px)到transform: translateY(0)，视觉上仍是“滑出”，但文字不缩放
真正要兼顾平滑、兼容和清晰，translateY + opacity 是比 scaleY 更少坑的选择，尤其当菜单内容以文本为主时。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
