How do you remain in an entered state using CSSTransition?

[studious]

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;
  }
}

[ryanwang520]

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

[mikhail-fedosenko]

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

[studious]

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.

[jquense]

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

[studious]

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

[jquense]

yes like: enter enter-active enter-done

[GMchris]

@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.

[GMchris]

How about this?
#269

[taion]

fixed in #269

[andrewcroce]

This is great, any idea when #269 will be released?