React-transition-group: How do you remain in an entered state using CSSTransition?

Created on 1 Dec 2017 · 10Comments · Source: reactjs/react-transition-group

Hi all.

I am using CSSTransition so that I can use keyframe animations for enter and exit. The challenge I have is that when the transitioning classnames disappear I am back at the start. I have tried using the onExited and onEntered callback to add the destination classname but they fire just 'after' the classnames have been removed which introduces a micro flicker of the original style and my new destination style. Is there some way to handle this?

.draw--closed {
  display: block;
  background: url('./assets/TilesDraw-background.png');
  margin-top: -10px;
  margin-left: -100vw;
  height: 0;
  width: 100vw;
}

.draw--opened {
  display: block;
  background: url('./assets/TilesDraw-background.png');
  margin-top: -10px;
  margin-left: 0vw;
  height: 429px;
  width: 100vw;
}

.draw-enter {
  height: 0;
  margin-left: -100vw;
}
.draw-enter.draw-enter-active {
  animation-name: slideIn;
  animation-duration: 2s;
}
.draw-exit {
  height: 429px;
  margin-left: 0vw;
}
.draw-exit.draw-exit-active {
  animation-name: slideOut;
  animation-duration: 2s;
}
@keyframes slideIn {
  0% {
    height: 0px;
    margin-left: -100vw;
  }
  50% {
    height: 429px;
    margin-left: -100vw;
  }
  100% {
    height: 429px;
    margin-left: 0vw;
  }
}
@keyframes slideOut {
  0% {
    margin-left: 0vw;
    height: 429px;
  }
  50% {
    margin-left: -100vw;
    height: 429px;
  }
  100% {
    margin-left: -100vw;
    height: 0px;
  }
}

Source

studious

Most helpful comment

yes like: enter enter-active enter-done

jquense on 6 Dec 2017

👍3

All 10 comments

Yep, I also think this is a problem, and I wonder why not add an -entered classname when the animation ends.

ryanwang520 on 2 Dec 2017

Maybe CSS property animation-fill-mode can help to achieve the desired effect?

Mikhail-Fiadosenka on 4 Dec 2017

Did you think I could get by without changing the classname in the final callback?

I'm finding I still need to use onEntered and onExited to alter the classname but using animation-fill-mode seems to stop the flash of original styling I was experiencing. I haven't tested in all browsers yet but it looks promising.

So at this stage it might be nice to have an -entered classname on the end to get around my need for two callbacks that alter the classname.

studious on 6 Dec 2017

The plan is to add entered/exited hooks for better ergonomics here. You can achieve the same effect in the meantime by having the default style be the entered state and unmountOnExit

This is an API oversight from the days when CssTransition was only used with transition group. If anyone wants to take a stab at an implementation please feel free to PR something

jquense on 6 Dec 2017

👍1

Do you mean there will be corresponding classnames with the hooks?

studious on 6 Dec 2017

yes like: enter enter-active enter-done

jquense on 6 Dec 2017

👍3

@jquense Any update on this? The unmountOnExit trick doesn't work for anything other than fading in and out as far as I can tell.