transition-property 和 transition-duration 必须成对设置，否则动画不生效；CSS 过渡基于属性变化而非状态切换，display 不可过渡，visibility 无缓动，应使用 opacity、transform 等可插值属性；单向动画需分离进入与离开的 transition 声明，仅在 entering 类中定义 transition，leaving 类中省略；可用 visibility + transition-delay 实现延迟隐藏；复杂场景推荐 @keyframes + animation 配合 forwards 保证终态。
transition-property 和 transition-duration 必须成对设置，否则动画不生效
很多人以为只写 transition: all 0.3s 就能控制进出，其实这是陷阱。CSS 过渡是「属性变化时触发」，不是「状态切换时触发」。如果你依赖 display 或 visibility 切换来显隐元素，display 不可过渡，visibility 虽可过渡但无缓动效果——它只有开/关两态。
真正可控的，是那些支持插值的属性，比如 opacity、transform、height（需有明确数值）。所以单向控制的前提，是把「进入」和「离开」拆成两个独立的属性变更路径：
- 进入时：从
opacity: 0→opacity: 1，同时transform: translateY(-10px)→transform: translateY(0) - 离开时：只改
opacity或只改transform，但不能让它们在同一个transition规则里反向竞争
用 class 切换 + 分离 transition 声明实现单向进入动画
核心思路：让「进入」有过渡，「离开」立刻生效，不加过渡。这靠的是给不同 class 设置不同的 transition 声明。
例如：
立即学习“前端免费学习笔记（深入）”；
.box {
opacity: 0;
transform: translateY(-10px);
}
.box.entering {
opacity: 1;
transform: translateY(0);
transition: opacity 0.3s ease, transform 0.3s ease;
}
.box.leaving {
opacity: 0;
transform: translateY(-10px);
/* 不写 transition —— 离开即刻发生 */
}JS 控制时，先加 entering，动画播完再移除；离开时直接加 leaving 并同步移除 entering，不等动画。
- 关键点：
transition只写在「要动的那一侧」，另一侧保持无声明或设为transition: none - 别在
:hover或伪类里写过渡，动态 class 更可控 - 如果用了
will-change: transform，记得在离开后清除，避免渲染残留
transition-delay 配合 visibility 实现「离开延迟」但不动画
有时你希望元素「视觉上停留一会儿再消失」，又不想它淡出——比如 tooltip 消失前停顿 200ms。这时候不能靠 transition，而要用 visibility + transition-delay 组合。
示例：
.tooltip {
opacity: 1;
visibility: visible;
transition: opacity 0.2s ease;
}
.tooltip.hiding {
opacity: 0;
transition-delay: 0.2s; /* 等 200ms 后才开始 fade */
}
.tooltip.hiding.immediately {
visibility: hidden; /* fade 完立刻隐藏 */
}JS 里这样调：
- 鼠标移出时，加
hiding - 监听
transitionend，事件触发后加immediately并移除hiding - 不监听的话，
visibility: hidden会被延迟覆盖，导致闪一下
用 @keyframes + animation 实现更可靠的单向控制
当 transition 开始绕晕人，尤其是需要「进入有缓动、离开有不同缓动、中间还要暂停」时，animation 更直白。
比如只进不出的弹入：
@keyframes slideIn {
from { opacity: 0; transform: translateY(-10px); }
to { opacity: 1; transform: translateY(0); }
}
.box.animated-in {
animation: slideIn 0.3s ease forwards;
}注意几个硬约束：
-
forwards必须加，否则动画结束立刻回退到初始态 - 离开时不要用
animation: slideOut 0.3s反向播放——浏览器不保证反向 keyframe 插值行为一致 - 真要控制离开动画，另写一个
slideOut动画，并用 JS 手动切换 class
复杂交互动画里，transition 容易被样式层叠覆盖，animation 的优先级更高，也更容易 debug。
