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!
A couple things:
{toggled&&
that wraps it.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>
);
}