React 状态变化中的 CSS 过渡

CSS transition 会让属性在一段时间内从一个值平滑插值到另一个值，而不是瞬间跳变。您可以在元素上使用 transition: property duration timing-function delay 声明它。

在 React 中，您通常不需要手动为内联值设置动画。相反，您可以通过状态切换类或样式，再由 CSS 为您处理中间帧。

常见模式是使用 useState 保存一个布尔值，并在它发生变化时切换 CSS 类。当类发生变化时，目标属性会得到新值，CSS 就会为这两个值之间的差异添加动画。

例如，isOpen 决定元素是否具有 open 类，而 open 类会设置不同的高度或变换。

一种典型的设置方式是 const [isVisible, setIsVisible] = useState(false)。按钮调用 setIsVisible(v => !v) 来切换它。

使用函数式更新器 v => !v 可以避免多个更新排队时使用过期状态，从而让切换更加可靠。

您可以动态构建类名：className={'panel ' + (isVisible ? 'panel--shown' : 'panel--hidden')}。基础类保存过渡声明，修饰类保存起始值和结束值。

将 transition 保留在始终存在的基础类中，可以确保动画在两个方向上都运行，包括打开和关闭。

通过列出多个属性，您可以同时为它们添加动画：transition: transform 300ms ease, opacity 300ms ease。淡入并滑动的效果结合了 opacity 的变化和 transform 上的 translateY 变化。

同时为两者添加动画，可以带来更精致的进入效果，让元素在淡入的同时向上滑动。

transition-delay 会推迟过渡的开始时间。为列表项设置逐渐增加的延迟，就能创建错落展开的效果，让每一项都比前一项稍晚开始动画。

在 React 中，您可以内联计算延迟，例如 style={{ transitionDelay: index * 50 + 'ms' }}。

display 属性无法添加动画，因为 none 和 block 之间没有中间值。对它进行过渡只会产生瞬间跳变，而不是淡入淡出。

相反，请为视觉上的淡入淡出设置 opacity 动画，并切换 pointer-events: none，让隐藏的元素在不可见时忽略点击。

时间函数决定速度如何随持续时间变化。linear 以恒定速度移动，ease 缓慢开始并缓慢结束，而 cubic-bezier(...) 允许您定义完全自定义的曲线。

自定义曲线非常适合实现迅捷或弹跳的感觉，例如使用 cubic-bezier(0.34, 1.56, 0.64, 1) 实现轻微的超调。

您可以将持续时间存储在 CSS 自定义属性中，例如 --speed: 300ms，然后重复使用它：transition: opacity var(--speed) ease。这样可以让各个组件的时间设置保持一致。

React 甚至可以通过 style={{ '--speed': '500ms' }} 内联设置该变量，让属性驱动动画时间。

浏览器可以在 GPU 合成器上为 transform 和 opacity 添加动画，而无需重新计算布局或重新绘制。为 width、top 或 margin 等属性添加动画，会迫使每一帧都执行布局工作，可能导致卡顿。

需要移动、缩放或旋转时，请优先使用 transform；需要淡入淡出时，请使用 opacity。

React 中可靠的过渡由布尔型状态、条件修饰类，以及在有利于 GPU 合成的属性上声明 transition 的基础类共同组成。状态切换类，而 CSS 负责执行动画。

这样可以让组件保持声明式，同时利用浏览器产生流畅的运动效果。

您已经学会通过切换由状态驱动的类来触发 CSS 过渡，同时为变换和不透明度添加动画，使用延迟创建错落效果，并通过使用不透明度和指针事件来避免对 display 设置过渡。

您还了解了时间函数、CSS 变量定义的持续时间，以及 GPU 合成属性为何能让运动保持流畅。