Transition a React Component using CSS with RTG’s `CSSTransition` component
In React Transition Group, there are two components at our disposal for transitions of singular components; <Transition> and <CSSTransition>. In this lesson, we’re going to discuss the key feature that CSSTransition has over Transition, i.e. forcing reflows to make more complex transitions more predictable. We’ll also look at how to use the key props of any transition; in, timeout, and children.
Could we please have a link to the code in it's start state so that we can code along? I know I'm not the only one who learns better this way.
Good explanation, however transitioning on width and height is not a good idea and may cause performance issues on a medium/large sized DOM.
Hi Steve, the code is available in the Codesandbox link above 👍
Hi cdn34, thanks for the input! As you can see I have very few DOM elements in these examples. Feel free to adjust your transition properties as per your use case 👍
Correct me if I'm wrong, your Codesandbox seems to already contain the completed transition? In your video: "00:24 Let's say we want to transition this balloon menu over time, so that it doesn't appear and leave straight away." How do I code along with this? Am I not being clear? Many of us learn better by doing rather than just watching a short video. So we need the code in the state you start the lesson.
Hi Steve, no problem! Here's the code before any transitions are added: https://codesandbox.io/s/kxvy25zy5v
Hope this helps!
if we animate transform: translateX() the animation doesnt work, and goes back to initial class style as soon as *-active class is removed. Can someone please tell me why.
Codesandbox - https://codesandbox.io/s/p9jpw90jwj