如何通过父元素过渡效果同时控制多个子元素的CSS过渡？

本文共计1039个文字，预计阅读时间需要5分钟。

很多人以为给容器元素添加 `transition: all 0.3s;，其中所有子元素的 `transform` 或 `opacity` 变化都会自动过渡。实际上，CSS 过渡只作用于 直接声明在元素自身上的属性变化。也就是说，父元素的过渡规则不会继承或代理到子元素上。

常见错误现象：div.parent { transition: opacity 0.3s; }，然后 JS 改 div.child.style.transform = 'scale(1.2)'，结果子元素毫无过渡效果。

• 过渡触发的前提是：目标元素的**可动画属性发生了值变化**（且该属性在该元素上有对应 transition 声明）
• 父元素的 transition 只监控它自己的属性（如 background-color、height），不监听子元素状态
• 即使父元素重排导致子元素位置/尺寸间接变化，那也属于 layout effect，不是 CSS transition 覆盖范围

真正能“批量控制”的两种可靠方式

想让多个子元素统一响应某类变化（比如 hover 时全部淡入+上移），必须把过渡声明落到每个需要动的子元素上，但可以借助 CSS 机制减少重复书写。