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

患得患失9492026-04-10 17:18

🎯 用 CSS 实现：移入立即执行，移出延时返回

一、目标

实现一个常见交互：

hover 进入：立即展开
hover 离开：延迟一段时间再收回

二、为什么直觉写法会失败

很多人会这样写：

html 复制代码

<button
  class="transition-all duration-300
         delay-1000 hover:delay-0
         hover:right-1"
>

结果：

❌ 进入也被延迟

原因一句话：

delay 在动画触发时就被确定，hover 时来不及生效

三、CSS 可行解法（核心思路）

只让"离开时"带 delay，而"进入时"没有 delay

但 CSS 没有"进入 / 离开"状态区分能力，所以需要绕开：

👉 让 delay 不参与动画触发过程

四、实现方案（推荐）

html 复制代码

<button
  class="fixed -right-[80px]
         transition-[right]
         duration-300
         delay-1000
         hover:right-1
         hover:delay-0"
>

五、为什么这个能成立

关键点：

1️⃣ 限制 transition 属性

css 复制代码

transition-property: right;

意味着：

只有 right 会触发动画
delay 只是参数，不参与"变化竞争"

2️⃣ 两个阶段的行为

✔ hover 进入

right 变化 → 触发动画
此时 delay = 0
👉 立即执行

✔ hover 离开

right 变化 → 再次触发动画
此时 delay = 1000ms
👉 延迟 1 秒后收回

六、效果本质

你实现的其实是：

同一个动画，不同触发方向使用不同 delay

七、工程建议

❌ 避免

css 复制代码

transition-all

问题：

所有属性参与 transition
delay 容易失效或行为不确定

✅ 推荐写法

css 复制代码

transition-[具体属性]

优点：

行为稳定
易于推导
无隐式副作用

八、扩展（适用场景）

这种写法适用于：

悬浮按钮（AI / 客服入口）
侧边工具栏
hover 展开的操作面板

本质都是：

防误触：快速响应进入，延迟响应离开

九、一句话总结

要实现"进快出慢"，关键不是控制 hover，而是控制"触发动画时的 delay"