17370845950

transition必须定义在元素默认状态而非伪类中，否则离开时无过渡；需检查是否被覆盖、属性是否支持动画（如避免display）、触发条件是否满足。

过渡效果失效或触发异常，通常是因为 transition 没有写在元素的默认（非伪类）状态中，而是只写在 :hover、:focus 等伪类里。CSS 过渡必须定义在“起始状态”，浏览器才能知道从什么属性值开始平滑变化。

transition 必须放在基础选择器上

错误写法：过渡只出现在伪类中，会导致进入时有动画，但离开时立刻跳变（无过渡）。

❌ 错误示例：

.btn {
  background: #007bff;
}
.btn:hover {
  background: #0056b3;
  transition: background 0.3s ease; /* ❌ 这里加无效 */
}

✅ 正确写法：把 transition 放在默认状态，确保进出都有过渡。

.btn {
  background: #007bff;
  transition: background 0.3s ease; /* ✅ 正确：定义在常态 */
}
.btn:hover {
  background: #0056b3;
}

检查是否被其他样式覆盖或重置

某些 CSS 框架或重置样式可能在伪类中意外设置了 transition: none 或覆盖了过渡属性。

• 用浏览器开发者工具检查 hover 状态下 transition 是否被划掉（表示被覆盖）
• 确认没有在 :hover 中重复声明 transition 且值为 none 或不完整
• 避免使用简写 transition: all 0.3s，它可能意外覆盖其他过渡；建议明确写出要过渡的属性

注意触发属性是否支持过渡

不是所有 CSS 属性都能过渡。例如 display、height（从 0 到 auto）、font-size（当值为 small/large 等关键字时）等可能表现异常。

• 优先使用数值型可动画属性：如 opacity、transform、background-color、margin、padding
• 想过渡高度？改用 max-height 配合足够大的固定值（如 max-height: 500px），并确保起始/结束值都是具体数字
• 需要隐藏显示又带过渡？用 opacity + visibility 组合，而非 display

确保伪类确实被触发且无阻止行为

有时看似没反应，其实是交互条件未满足：

• 检查元素是否可聚焦（tabindex 缺失导致 :focus 不生效）
• 确认鼠标悬停区域正确（父容器 overflow: hidden 或 pointer-events: none 可能拦截事件）
• 移动端需注意 :hover 在触摸设备上兼容性差，建议搭配 :active 或 JS 添加 class 控制