1

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!

isherwood
  • 58,414
  • 16
  • 114
  • 157
KaptainIglo
  • 152
  • 1
  • 10
  • I don't see a problem with what you've shown us. It looks just like one of my implementations. Do you get any console errors? Could you work up a live demo somewhere? – isherwood Jan 31 '22 at 21:23
  • Although my `-enter` rule has a CSS transition property on it, and my `-enter-active` rule has an animation property on it. – isherwood Jan 31 '22 at 21:25

1 Answers1

1

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>
  );
}
Willow
  • 1,132
  • 5
  • 20
  • The code below seems to work! will try on my actual project and confirm ' {toggled &&
    TEST!
    }     – KaptainIglo Jan 31 '22 at 21:48
  • 1
    @isherwood I fixed it in the code I posted, but I will edit to make that clearer. – Willow Jan 31 '22 at 21:48
  • 1
    @KaptainIglo you don't need `{toggled &&
    TEST!
    }` - since `CSSTransition` is unmounting the component for you, that is a no-op. Just `
    TEST!
    ` will do     – Willow Jan 31 '22 at 21:50
  • THANK YOU both @Willow and isherwood. Works like a charm :) Well noted regarding the unnecessary conditional – KaptainIglo Jan 31 '22 at 21:53