What are some examples of transitions in React?

What are some examples of transitions in React?

In React, transitions can be implemented using 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 Enter</button>
      <CSSTransition in={inProp} timeout={200} classNames="fade">
        <div className="fade">Hello, World!</div>
      </CSSTransition>
    </div>
  );
}

This code toggles the visibility of "Hello, World!" with a fade effect.

What CSS styles do I need for the fade effect?

You can add the following CSS styles:

.fade-enter {
  opacity: 0;
}
.fade-enter-active {
  opacity: 1;
  transition: opacity 200ms;
}
.fade-exit {
  opacity: 1;
}
.fade-exit-active {
  opacity: 0;
  transition: opacity 200ms;
}

Can I use Framer Motion instead?

Absolutely! Framer Motion provides a more intuitive API. Would you like an example using it?