Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript Creating the Animations with CSS

Brendan Whiting
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Brendan Whiting
Front End Web Development Techdegree Graduate 84,738 Points
Posted by Brendan Whiting
.a{fill-rule:evenodd;}techdegree seal-36
Brendan Whiting
Front End Web Development Techdegree Graduate 84,738 Points

Why does React remove the classes?

In this example, when we add a new person to the Guest List, React immediately adds the two classes "slide-enter" and "slide-enter-active" to the element that take care of the animation. Then after 5 seconds delay it removes the classes. Why does it need to remove them? And what do we gain by telling it to delay removing it? I tried removing the lines of code where we set the timeout and it removed the classes earlier but still worked the same.

/* start enter state */
.slide-enter {
  transform: translateX(-100%);
}

/* end enter state */
.slide-enter.slide-enter-active {
  transform: translateX(0);
  transition: transform .5s ease-out;
}

        <ReactCSSTransitionGroup 
          component="ul"
          transitionName="slide"
          transitionEnterTimeout={5000}
          transitionLeaveTimeout={5000}>

1 Answer

Tom Geraghty
Tom Geraghty
24,174 Points
Tom Geraghty
Tom Geraghty
24,174 Points

Remember this is in a component built entirely for managing CSS animations (transitions, transforms, etc). There are various times when you would want to apply a transition or animation and this component module gives you the ability to apply different styling to each of those times.

For example, clicking a button to change the size of a box on screen. Maybe you want the style to change immediately when you click the button so the user knows their action was recorded, then after the button is clicked you want some animation action to take place (say, increasing the size of the object that was clicked on), and then once the animation of it growing in size is complete you may want a final style to be added to the object (say, changing it's color so you know it was clicked on/activated in some way).

These are just generalities as it's dependent on your app's needs and your imagination what you do with animations. But generally speaking you're going to have an initial state, a click/tap state, an animating state, and a final state. This component gives you the ability to render different styles in each of those states.