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

This simple React hook based animation wrapper not work correctly when i add a delay to the animation.

The code acts as a reasonable simple animation wrapper without any css animation delay e.g.

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

but when i add a delay to the css animation it renders the div without any animation and THEN renders again with the animation after the delay.

e.g.

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

Is there a way to modify this to suspend rendering the children correctly with a delay?

CodePudding user response：

You have to specify fill-mode for the animation to make it work as you expect:

So just add both property to animation:

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).