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

Christopher Parke
Christopher Parke
21,978 Points
Posted by Christopher Parke
Christopher Parke
21,978 Points

Nexting the CSS Rules breaks the animation

I'm not sure if this is because this video is old or something, but if you nest the rules as Guil suggests your animations won't work. They will only work un-nested.

eg

/* start leave state */ .slide-leave { transform: translateX(0); }

/* end leave state */ .slide-leave-active { transform: translateX(100%); opacity: 0; transition: 0.5s ease-in; }

Will work, while what Guil says to do in the video, will not.

2 Answers

Andrew Srb
Andrew Srb
1,422 Points
Andrew Srb
Andrew Srb
1,422 Points

Just verifying that this is the case. Would be helpful to know why. Thanks for posting.

Robert McIntosh
Robert McIntosh
1,645 Points
Robert McIntosh
Robert McIntosh
1,645 Points

Just wanted to provide the following code to help anyone who may be having issues if they decided to use the lastest version of react-transition group.

For reference my guest looks like the following

let guests = this.state.names.map((name, index) => (
  <CSSTransition key={name.name}
  timeout={500}
  classNames="slide">
    <li className="slide">
      {name.name}
      <button onClick={this.handleRemove.bind(this, index)}>Remove</button>
    </li>
  </CSSTransition>
));

The css I used was the following

.slide {
  transition: transform 0.5s ease-in-out;
  transform: translateX(0);
}

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

/* end enter state */
.slide.slide-enter-active,
.slide.slide-enter-done {
  transform: translateX(0);
}
/* start leave state
  && end leave state */
.slide.slide-exit-active,
.slide.slide-exit-done {
  transform: translateX(100%);
}