What are some examples of transition animations in React?

What are some examples of transition animations in React?

In React, you can use libraries like React Transition Group or Framer Motion. Would you like to see specific examples?

Yes, please provide an example using React Transition Group.

Sure! Here's a simple example:

import { CSSTransition } from 'react-transition-group';

function MyComponent() {
  const [inProp, setInProp] = useState(false);

  return (
    <div>
      <button onClick={() => setInProp(!inProp)}>Click to Toggle</button>
      <CSSTransition in={inProp} timeout={200} classNames="fade">
        <div className="fade">I am a fade Transition!</div>
      </CSSTransition>
    </div>
  );
}

This will create a fade-in and fade-out effect when toggling the component.

That looks great! Can you explain the classNames prop?

The classNames prop in CSSTransition allows you to define the CSS classes that will be applied during the transition phases. For example, if you set classNames="fade", it will look for classes like fade-enter, fade-enter-active, fade-exit, and fade-exit-active to control the animation.

Thanks! How can I customize the duration of the animation?

You can customize the duration by changing the timeout prop. For example, if you set timeout={500}, the animation will last for 500 milliseconds.