嵌套元素中transition不生效最常见原因是父容器设overflow: hidden或transform，打断渲染管线；display切换不可动画；应改用transform+opacity，并统一transition声明。
嵌套元素里transition不生效的常见原因
最常遇到的是父容器设置了 overflow: hidden 或 transform，但子元素的 transition 依赖于布局重排（比如改 width、left），而父层的变换或裁剪会打断渲染管线，导致过渡卡顿甚至完全不触发。另一个高频问题是子元素用了 display: none → block 切换——display 本身不可动画，transition 对它完全无效。
用 transform + opacity 替代 width/height 的实操建议
对嵌套结构做展开/收起类动效时，别碰 width 和 height：
- 用
transform: scaleY(0)→scaleY(1)控制垂直展开，配合transform-origin: top让它从上往下“拉”出来 - 用
opacity: 0→1控制淡入，和transform同步写在一条transition里，例如：transition: transform 0.25s ease-out, opacity 0.25s ease-out - 确保父容器有明确的
height: auto或不设固定高，否则transform会被截断
多个嵌套层级间过渡顺序混乱怎么办
当一个列表项里有图标、文字、边框三块都带 transition，鼠标一 hover 就不同步“动起来”，本质是各属性默认用了相同缓动函数但响应延迟不同。解决方法不是调时间，而是统一节奏：
- 把所有要动的属性写进同一行
transition，显式指定相同timing-function和duration，比如：transition: transform 0.3s cubic-bezier(0.34, 1.61, 0.7, 1), opacity 0.3s cubic-bezier(0.34, 1.61, 0.7, 1) - 避免在子元素上单独加
transition-delay，需要错峰就用@keyframes配合animation-delay，transition 不适合做精确时序编排 - 如果某层必须延迟（比如卡片展开后文字才浮现），给文字加
transition: opacity 0.2s 0.15s，延迟值直接写在简写里
transition 与 :hover 冲突导致闪跳
嵌套结构中，外层 :hover 触发父元素缩放，内层图标也绑了 :hover 改颜色——鼠标划过瞬间，两个伪类同时生效，浏览器来不及合并状态，就会先跳变再过渡。关键点在于：
- 去掉内层独立的
:hover，统一由父级:hover驱动所有子元素样式变化 - 父元素上定义完整 transition，包括子元素要变的属性，例如：
.card:hover .icon { transform: rotate(90deg); }，并在.card上写transition: transform 0.3s, background-color 0.3s - 如果子元素需独立交互（如按钮图标），用 JavaScript 监听
mouseenter并加 class 控制，避开 CSS 伪类竞争
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
