必须用逗号分隔的简写语法一次性定义transition，多行声明会覆盖；同一属性进出动画需用js切换不同class实现差异化延迟；:nth-child设延迟时需注意元素类型混杂问题，且单位必须显式写出。
可以，但必须用逗号分隔的简写语法一次性定义，不能靠多个 transition 声明叠加。
为什么不能写两行 transition？
浏览器只认最后一个 transition 声明，前面的会被完全覆盖。比如：
.box {
transition: width 0.3s;
transition: opacity 0.5s 0.2s;
}
实际生效的只有 opacity 那条，width 根本没过渡效果。
正确做法是把所有属性写在同一行，用逗号分隔：
.box {
transition: width 0.3s, opacity 0.5s 0.2s;
}
-
width立即开始，持续 0.3 秒 -
opacity延迟 0.2 秒后开始，持续 0.5 秒
如何为同一属性的不同状态设不同延迟？
比如悬停时 transform 立即动，离开时想让它晚点收——这没法靠 transition-delay 单独控制，因为它是基于“属性值变化”触发的，不区分进入还是退出。
真正可行的方式是：
- 给进入和退出分别定义 class（如
.enter/.exit） - 在
.enter中设transition: transform 0.3s; - 在
.exit中设transition: transform 0.4s 0.1s; - 用 JS 控制 class 切换时机
纯 CSS 下，:hover 状态里写的 transition 对进入和退出都生效，延迟值固定，无法反转。
多个元素交错动画时，transition-delay 容易踩的坑
用 :nth-child 批量设延迟很常见，但要注意：
- 别误用
:nth-of-type：父容器里混有文本节点或其他标签时，:nth-child(2)和:nth-of-type(2)指的可能不是同一个元素 - 延迟值建议用小数秒（如
0.15s），整数秒（1s）容易让动画显得生硬、卡顿 - 如果元素由 JS 动态插入且数量不固定，纯 CSS 的
:nth-child会失效，得改用 CSS 自定义属性 + JS 注入延迟值 -
transition-delay支持负值（如-0.2s），表示动画从中间帧切入，但这个特性在快速反复触发时行为不稳定，慎用
最常被忽略的一点：延迟值单位必须显式写出，transition-delay: .3 是无效的，必须写成 transition-delay: 0.3s 或 300ms。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
