transition-delay 必须与 transition-property 和 transition-duration 同时设置才生效，缺一不可；仅设 delay 不触发过渡，且 display 变化不支持动画，需改用 opacity + visibility 配合。

只写 transition-delay 没用，必须配齐 transition-property 和 transition-duration 才能触发延时过渡。

为什么写了 transition-delay 却没反应

浏览器根本不会启动过渡流程——它只认“完整过渡声明”。transition-delay 不是独立开关，而是 transition 复合属性的第 4 个位置值，缺了前 3 项（属性、时长、缓动函数），延迟就形同虚设。

• ❌ 错误：只在 CSS 里写 transition-delay: 0.3s，其他啥都没设
• ❌ 错误：写了 transition: opacity 0.3s，漏掉缓动函数或 delay 位置错乱（比如写成 transition: opacity 0.3s 0.2s ease）
• ✅ 正确：显式写出全部四项，哪怕用默认值，例如 transition: opacity 0.3s ease 0.2s
• ✅ 更稳妥：用分开声明的方式，避免顺序踩坑：transition-property: opacity + transition-duration: 0.3s + transition-timing-function: ease + transition-delay: 0.2s

悬停后延时显示元素，别碰 display

display: none → display: block 不支持过渡，写再多 transition-delay 都白搭。要实现“悬停 A 后，B 延迟淡入”，得换可动画属性。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

• 用 opacity 替代显示/隐藏：初始设 opacity: 0; visibility: hidden;，悬停后设 opacity: 1; visibility: visible;
• 必须同时控制 visibility，否则透明但占位、仍可点击
• 延迟写在目标元素上，不是触发元素上：.target { transition: opacity 0.4s ease 0.25s; }
• 如果想让延迟随悬停状态“可逆”（移开鼠标也延时消失），记得 hover 状态里也要写回退值：.trigger:hover + .target { opacity: 1; }

JS 动态改延迟时，浏览器会“偷懒”

直接改 el.style.transitionDelay = '0.5s'，再立刻改 el.classList.add('active')，大概率延迟不生效——浏览器还在用旧的 transition 缓存。

• ✅ 安全做法：先清空 transition，强制重排，再设新值：

  el.style.transition = 'none';
  el.offsetHeight;
  el.style.transition = 'opacity 0.3s ease 0.5s';

• ✅ 更干净的方案：用 CSS 自定义属性，JS 只改变量：transition: opacity 0.3s ease var(--delay, 0.1s);，然后 el.style.setProperty('--delay', '0.6s');
• ⚠️ 注意：如果元素正在过渡中，新 delay 会被忽略，必须等当前过渡结束或手动中断

真正卡住人的不是 delay 本身，而是它依赖的那套“触发前提”：属性可动画、起止值明确、声明完整、时机可控。少一个环节，延迟就静音了。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！