【css技巧】用 CSS 实现：移入立即执行，移出延时返回

张开发
• 2026/4/12 16:03:41 • 15 分钟阅读

最新文章

推荐文章

相关文章

分享文章

【css技巧】用 CSS 实现：移入立即执行，移出延时返回
用 CSS 实现移入立即执行移出延时返回一、目标实现一个常见交互hover 进入立即展开hover 离开延迟一段时间再收回二、为什么直觉写法会失败很多人会这样写buttonclasstransition-all duration-300 delay-1000 hover:delay-0 hover:right-1结果❌ 进入也被延迟原因一句话delay在动画触发时就被确定hover 时来不及生效三、CSS 可行解法核心思路只让“离开时”带 delay而“进入时”没有 delay但 CSS 没有“进入 / 离开”状态区分能力所以需要绕开让 delay 不参与动画触发过程四、实现方案推荐buttonclassfixed -right-[80px] transition-[right] duration-300 delay-1000 hover:right-1 hover:delay-0五、为什么这个能成立关键点1️⃣ 限制 transition 属性transition-property:right;意味着只有right会触发动画delay只是参数不参与“变化竞争”2️⃣ 两个阶段的行为✔ hover 进入right变化 → 触发动画此时delay 0立即执行✔ hover 离开right变化 → 再次触发动画此时delay 1000ms延迟 1 秒后收回六、效果本质你实现的其实是同一个动画不同触发方向使用不同 delay七、工程建议❌ 避免transition-all问题所有属性参与 transitiondelay 容易失效或行为不确定✅ 推荐写法transition-[具体属性]优点行为稳定易于推导无隐式副作用八、扩展适用场景这种写法适用于悬浮按钮AI / 客服入口侧边工具栏hover 展开的操作面板本质都是防误触快速响应进入延迟响应离开九、一句话总结要实现“进快出慢”关键不是控制 hover而是控制“触发动画时的 delay”

更多文章