CSSTransition is not triggered

Sandbox: https://codesandbox.io/s/practical-mountain-cjrte?file=/src/App.js

I’m trying to use CSSTransition from react-transition-group, for the first time, and it does not work 🙁

When I click on my button "learn more", I want to display the component "Expanded"(a div block) with a transition.

As of now, I don’t get ANY animation of any kind. What am I doing wrong?

I’m using react-transition-group version 4.4.2.

Here is an extract of the container component:

import { CSSTransition } from 'react-transition-group';
import './styles.scss'

const MyComponent = ()=>{
  const [toggled, setToggle] = useState(false)
const handleClick=()=> {
setToggle(prevState=> !prevState)
}
return (
  <div>
        {toggled?
          <TransparentButton onClick={handleClick}>
          back
          </TransparentButton>
        :<TransparentButton onClick={handleClick>
          learn more
        </TransparentButton>   
}

    {toggled&&
      <CSSTransition in={toggled} timeout={200} classNames="my-node">
        <Expanded />
      </CSSTransition> 
      }

  </div>
)

./styles.scss:

.my-node-enter {
  opacity: 0;
}
.my-node-enter-active {
  opacity: 1;
  transition: opacity 2000ms;
}
.my-node-exit {
  opacity: 1;
}
.my-node-exit-active {
  opacity: 0;
  transition: opacity 200ms;
}

Thank you for your help!

>Solution :

A couple things:

1. You don’t want to mount CSSTransition conditionally. So remove the {toggled&& that wraps it.
2. Add unmountOnExit prop to CSSTransition. CSSTransition will handle unmounting the component for you.

Check out their example: http://reactcommunity.org/react-transition-group/css-transition

It’s bit weird because their CodePen on their site is different than their example. They have unmountOnExit in the CodePen but not in the written part of the docs.

export default function App() {
  const [toggled, setToggle] = useState(false);
  const handleClick = () => {
    setToggle((prevState) => !prevState);
  };

  return (
    <div>
      {toggled ? (
        <button onClick={handleClick}>back</button>
      ) : (
        <button onClick={handleClick}>learn more</button>
      )}

        <CSSTransition in={toggled} timeout={200} classNames="my-node" unmountOnExit>
          <div> TEST!</div>
        </CSSTransition>
    </div>
  );
}