React Component Open and Collapse Animation with dynamic content

Question

I have a Component which displays values dynamically to the user in a List , i want to be able to animate the opening and closing of the list based on the state . I choose React Transition Group as it is a very low lying Animation lib for React . But Due to the dynamic nature of my component i am not able to animate the body opening and closing .

This is what i have been able to try stackblitz

Link is dead. This question has not much value until you fix the link or add the example as inline code. — pizzamonster, Mar 16 '22 at 22:35

score 0 · Accepted Answer · answered Dec 02 '19 at 18:48

Ok, this is my first TransitionGroup example. It seems to work. In viewMore.js change the return to this:

  return (
    <>
      {header}
      <TransitionGroup component="ul">
        {listView.slice(0, maxItems).map((data, index) => (
          <CSSTransition
            timeout={500}
            classNames="fade"
            key={data}
          >
            <li>{data}</li>
          </CSSTransition>
        ))}
        {constructShowMoreFooter()}
      </TransitionGroup>
    </>
  )

And add this to the style.css:

.fade-enter {
  max-height: 0;
  opacity: 0;
}

.fade-enter-active {
  max-height: 30px;
  opacity: 1;
  transition: all 500ms;
}

.fade-exit {
  max-height: 30px;
  opacity: 1;
}

.fade-exit-active {
  max-height: 0;
  opacity: 0;
  transition: all 500ms;
}

And this is the example: https://stackblitz.com/edit/react-nczgpx?file=index.js

React Component Open and Collapse Animation with dynamic content

1 Answers1