React 动画：如何使用简单的基于钩子的包装器 class 来延迟动画？

Question

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

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

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

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

例如

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

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

Answer 1

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

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

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

CSS animations do not affect an element before the first keyframe is played or after the last keyframe is played. The animation-fill-mode property can override this behavior. The animation-fill-mode property specifies a style for the target element when the animation is not playing (before it starts, after it ends, or both).

React 动画：如何使用简单的基于钩子的包装器 class 来延迟动画？

React animation: how to delay animation using simple hook based wrapper class?

css

animation

css-animations

reactjs