css过渡如何触发非hover状态_通过focus、active等其他伪类触发过渡

 
卡片内容
 

对应 CSS 需同时定义初始态和聚焦态：

立即学习“前端免费学习笔记（深入）”；

.card {
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.2s, transform 0.2s;
}
.card:focus {
  opacity: 0.8;
  transform: scale(0.95);
}

• tabindex="0" 让元素进入标准 Tab 顺序；tabindex="-1" 则只能通过 JS .focus() 触发，不能用 Tab 键到达
• 键盘 focus 后，若用户点击页面其他地方，:focus 会自动移除，过渡反向执行——前提是初始态属性值已明确定义
• 移动端 Safari 对 :focus 支持较弱，常需配合 ontouchstart 或监听 focusin 事件补全逻辑

:hover 失效后如何保持 transition 效果（模拟“悬停锁定”）

CSS 本身无法让 :hover 状态持久化，但可通过组合伪类或 JS 实现近似效果。常见场景是：鼠标划过弹出菜单，希望移开后菜单延迟收起，而非立即消失。

• 纯 CSS 方案：用 :focus-within 替代 :hover，把容器设为可聚焦，并在子元素获得焦点时维持状态
• 更可靠的是监听 focusin / focusout 事件，给容器添加临时 class（如 is-open），再用 CSS 过渡这个 class 的样式
• 避免直接监听 mouseenter/mouseleave 并 toggle class——这容易因快速进出导致过渡中断；改用 setTimeout 加防抖，只在真正离开后才移除 class

例如，一个下拉按钮：

ARC Lab

腾讯旗下ARC实验室推出的AI人像修复、抠图和增强工具

下载

.dropdown-trigger:focus-within .dropdown-menu {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.2s, transform 0.2s;
}
.dropdown-menu {
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.2s, transform 0.2s;
}

此时点击下拉项后，只要焦点仍在菜单内，过渡就持续有效。

transition-delay 和 transition-duration 的实际影响差异

transition-delay 是等待多久才开始动画，transition-duration 是动画持续多久——但它们共同决定“何时可见变化”。容易被忽略的是：delay 不会阻塞后续状态切换。例如：

a { transition: color 0.3s 0.1s; }
a:hover { color: red; }
a:active { color: blue; }

当用户先 hover 再快速点击，:active 会立即覆盖 :hover 的颜色，但因 delay 是 0.1s，hover 的红色甚至还没来得及出现，就被蓝色替代了。

• 若需多状态平滑衔接，避免在不同伪类中混用不同 transition-delay，统一设为 0 更可控
• 想实现“悬停渐显 → 点击瞬变”，可为 :active 单独写 transition: color 0.05s（无 delay），覆盖全局过渡规则
• transition 的生效依赖属性是否“可插值”，像 visibility 就不可过渡，即使写了 transition: visibility 0.3s 也无效

真正难调的从来不是写几行 transition，而是理清状态切换时机、初始值声明、以及浏览器对伪类生命周期的处理边界。