Search code examples
reactjscss-animations

React animation: Resize container, AND THEN add add contents

I need to create a React component that displays multiple rows (For this thread, let's just say each row correspond to a string. In reality, I need to create another component per row).

I want the following behavior every time the contents change:

  1. Whatever current rows are displayed are removed with a fade of 1 second.
  2. The component calculates the height needed for the new content (rowCount x fixed height) and animates to that height, also with a duration of 1 second.
  3. The new rows are fade into view. Also with an animation of 1 second.

I've tried multiple strategies, but I can't get the animations to work one after the other.

Am I missing a simple solution? Is there a component out there that does this?

Solution

  • If your row has static size, then you can use animation-delay property in css.

    If your animations are triggered by upper row components' animation end event, you can add onAnimationEnd listener to your components. you can call Element.animate() function inside the listener.