transition本身不继承，但子元素可能因父级状态变化间接触发动画；父级transform/overflow会打断子元素width等依赖layout的过渡；z-index与父级transition冲突时需加position或改用transform；兄弟hover竞争导致闪跳应统一由父级驱动。
transition 不会继承，但子元素可能“被动响应”
父元素写 transition: all 0.3s，子元素没写任何 transition，hover 时它却动了——这不是继承生效，而是子元素自身属性被父级状态变化间接改变了。比如父级 :hover 触发了 .parent:hover .child { opacity: 0.8; }，而子元素恰好有从父级“拿到”的 transition: all 0.3s（未显式覆盖时会继承初始值），于是 opacity 变化就被过渡了。
关键点在于：transition 属性本身可继承，但是否动画只看两点：子元素该属性值是否变化 + 是否有生效的 transition 声明。用 getComputedStyle(el).transition 在控制台查，能立刻确认子元素实际生效的是什么。
父容器 transform 或 overflow 会打断子元素过渡
子元素设了 transition: width 0.2s，但父容器加了 overflow: hidden 或 transform: scale(1)，过渡就卡住甚至不触发。原因很实在：这些声明会让浏览器创建新的渲染层或裁剪上下文，导致依赖 layout 变化的属性（width、height、left）无法进入硬件加速管线，浏览器干脆跳过过渡帧。
- 改用
transform: scaleX(0) → scaleX(1)替代width动画，它不触发重排，且天然兼容overflow: hidden - 避免在父级
transform动画中同时操作子元素的margin或top，它们和transform不同源，容易打架 - 检查 Chrome DevTools 的 “Layers” 面板，确认子元素是否被意外降级到软件渲染
子元素 z-index 和父级 transition 冲突导致动画失效
父元素设了 transition: background-color 0.3s，子元素带 z-index: 2，结果整个过渡直接不执行。这不是 bug，而是 CSS 渲染规则：当子元素存在 z-index（且父元素未定位），浏览器会尝试为它建立层叠上下文，这个过程可能干扰过渡的初始状态采集，尤其在首次触发时。
解决方法很简单：
- 给父元素加
position: relative（或absolute），让z-index有作用域，不乱建上下文 - 或者删掉子元素的
z-index，改用transform: translateZ(0)提升合成层（注意：这会创建新层叠上下文，不是“提层级”，只是让动画更稳） - 更彻底的方案：子元素不需要过渡的属性，显式写
transition-property: none或transition: opacity 0.2s（只列需要的）
兄弟元素 hover 和子元素 hover 同时触发造成闪跳
父容器 .card 有 :hover 缩放，里面图标又单独写了 .icon:hover { color: red; }，鼠标一划过，先闪一下再过渡——本质是两个伪类竞争样式计算时机，浏览器来不及合并状态。
正确做法是收口到父级驱动：
- 去掉子元素独立的
:hover，统一用.card:hover .icon { color: red; transform: rotate(15deg); } - 所有要变的属性都写在父元素的
transition里：transition: transform 0.3s, background-color 0.3s, color 0.3s - 如果真需错峰（比如图标先转再变色），用
transition-delay写在简写里：transition: transform 0.3s 0s, color 0.3s 0.1s
真正麻烦的从来不是 transition 写不写得出来，而是你没意识到那个看似无关的 overflow: hidden 或 z-index，已经悄悄把渲染管线切成了两段。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
