Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.
Animate a Component's Initial Mounting2:55 with Guil Hernandez
ReactCSSTransitionGroup are animated when mounted and unmounted, but you can also add an extra transition phase at the initial mount of the element rendered by
<CSSTransitionGroup> component has been removed in version 2. A
<CSSTransition> component was added for use with the new
<TransitionGroup> component to accomplish the same tasks.
More React Courses and Workshops
So as you've seen, the items inside the ReactCSSTransitionGroup component
are animated when they're mounted and unmounted from the DOM.
But you can also add an extra transition phase at the initial mount of the main
component or the element being rendered by the ReactCSSTransitionGroup component,
in our case, it's the ul.
So ReactCSSTransitionGroup provides two optional props to enable this transition,
transitionAppear, And transitionAppearTimeout.
So transitionAppear, when set to true, instructs ReactCSSTransitionGroup
to apply a transition at the initial mount of the component and
transitionAppearTimeout, just like EnterTimeout and
LeaveTimeout, defines the transition's duration.
So once again I'll set it to 500 milliseconds or 0.5 seconds.
So now during the initial mount,
ReactCSSTransitionGroup will give the ul element the class slide-appear.
Then immediately after, slide-appear-active.
And just like earlier we can target these classes with CSS to add transitions.
So first, in my stylesheet, I'll target the class
slide-appear to give it an opacity of 0.
Then for the active class, I'll create a new rule that
Here I'll set the opacity back to 1 and
transition the opacity property over 0.5 seconds.
All right, so I'll give my stylesheet a save.
And over in the browser, I'll refresh the app to remount the component.
And we see just the guest list fade in over 0.5 seconds, great.
So as you've just learned one of the best parts about using ReactCSSTransitionGroup
is that it's easy to use because you can take advantage of the CSS transitions,
transforms and animations you're used to.
Now ReactCSSTransitionGroup is a simple animation library, so
that means it doesn't include features like interpolation,
timeline management like pausing and rewinding, for example and
Now, there are other more advanced and powerful animation libraries for
React out there, so be sure to check the resources
posted in the teacher's notes to learn more about those.
You need to sign up for Treehouse in order to download course files.Sign up