React中CSS transition退出动画为何不执行-css教程-PHP中文网

csstransition的in为false时exit类未添加，最常见原因是classnames前缀不匹配或timeout.exit小于css transition-duration。需确保css定义了.fade-exit/.fade-exit-active类，且timeout.exit≥最长transition-duration，避免display:none或height:auto等不可过渡属性。

react中css transition退出动画为何不执行

CSSTransition 的 `in` 为 false 时，`exit` 类根本没加上去

最常见的情况是：你点了关闭按钮，in 立刻变成 false，但 DOM 上只看到 xxx-exit 类闪一下就没了，或者压根没出现。这通常不是动画没执行，而是类名压根没被加上。

检查 DevTools 元素面板，手动触发退出后看目标元素上有没有 xxx-exit 和 xxx-exit-active —— 如果没有，问题出在 classNames 配置或状态更新时机上。

classNames="fade" 要求你必须定义 .fade-exit 和 .fade-exit-active，少一个就卡住
别写成 classNames={{ exit: 'fade-out' }} 却只写了 .fade-exit —— 前缀不匹配，React 找不到对应类
in 切换太急（比如在事件回调里直接 setState），可能触发了 React 的批量更新优化，导致类名添加和移除发生在同一帧，浏览器来不及渲染中间态

`timeout.exit` 小于 CSS 中 `transition-duration`

timeout 不是“动画时长”，而是 React 等待 CSS 动画完成的**最大容忍时间**。它必须 ≥ 对应的 CSS transition 持续时间，否则 React 会提前移除 xxx-exit 和 xxx-exit-active，动画直接中断。

比如你在 CSS 里写了 transition: opacity 0.5s, transform 0.3s，那 timeout.exit 至少得设成 500（取最大值），不能写 300。

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

多个属性过渡时间不一致？取最长的那个，别偷懒写 timeout={300}
用 transition: all 0.3s？更危险——万一某次更新意外改了 color 或 background，也会被过渡，且 duration 可能被覆盖
推荐显式声明：transition: opacity 0.5s ease, transform 0.5s ease，然后 timeout={{ exit: 500 }}

退出时用了 `display: none` 或未设初始值的 `height`

CSS transition 对 display、height（未设具体数值）、overflow 等属性完全无效。常见陷阱是：想用 height: 0 → height: auto 实现收起动画，结果发现没过渡。

根本原因是 auto 无法插值计算中间帧，浏览器直接跳到最终值。

手风琴组件要动画高度？先用 getBoundingClientRect() 或 scrollHeight 读出真实像素值，再设为 height；关闭时设回具体像素（如 0px），而非 auto
绝对不要写 display: none + transition —— 它一出现就销毁，动画根本没机会开始
安全替代方案：用 opacity + visibility: hidden，或 transform: scale(0) + pointer-events: none

transition 写错了位置，或属性不可过渡

过渡必须写在**被改变样式的目标元素本身**上，而不是触发它的按钮、父容器或 wrapper 上。而且只对可过渡属性生效。

比如卡片淡出，transition 必须写在卡片的 class 里（如 .card），而不是按钮上；且只对 opacity、transform、color 等生效，对 width、left、font-size 在旧浏览器里支持差，还容易卡顿。

检查你写的 transition 是否作用在真正变化的属性上：如果 JS 改的是 transform，CSS 里却只写了 transition: opacity 0.3s，那当然没反应
避免在 :hover 伪类里单独写 transition —— 它会被普通状态下的声明覆盖
硬件加速优先：位移用 transform: translateY()，别用 top；缩放用 scale()，别动 width/height