反应动画：如何使用简单的基于钩子的包装类来延迟动画？答案

【问题标题】：React animation: how to delay animation using simple hook based wrapper class?反应动画：如何使用简单的基于钩子的包装类来延迟动画？
【发布时间】：2021-12-29 13:51:33
【问题描述】：

当我向动画添加延迟时，这个基于 React 钩子的简单动画包装器无法正常工作。

见sandbox here

代码充当合理的简单动画包装器，没有任何 css 动画延迟，例如

animation: `${show ? "fadeIn" : "fadeOut"} 1s`

但是当我向 css 动画添加延迟时，它会在没有任何动画的情况下渲染 div，然后在延迟后再次渲染动画。

例如

  return (
    render && (
      <div
        style={{
          animation: `${show ? "fadeIn" : "fadeOut"} 1s 1s`,
          position: "relative"
        }}
        onAnimationEnd={onAnimationEnd}
      >
        {children}
      </div>
    )
  );

有没有办法修改它以延迟正确地暂停渲染子级？

【问题讨论】：

标签： css reactjs animation css-animations

【解决方案1】：

您必须为动画指定填充模式以使其按预期工作：

所以只需将both 属性添加到动画：

animation: ${show ? "fadeIn" : "fadeOut"} 1s 1s both`,`

CSS 动画在播放第一个关键帧之前或在播放最后一个关键帧之后不会影响元素。 animation-fill-mode 属性可以覆盖此行为。 animation-fill-mode 属性指定动画未播放时目标元素的样式（在动画开始前、结束后或两者兼有）。

【讨论】：