How to trigger animations correctly if you want to change the display property?

Question

css

When animating a modal window, in addition to the animation, you need to change the display property (from none to block and vice versa). I implemented everything like this: https://jsfiddle.net/GrigoryMorozov/w1s76Lrv/14/ .

Disappearance always occurs smoothly, but the appearance - jumps. If we add a slight delay after changing the display property (see the alt-show function ), everything works as it should. But if a more complex animation is performed, this delay has to be significantly increased (up to one or several seconds).

I feel like I'm going down the wrong path. I would be grateful for advice on this matter.

Answer 1

Hide the element behind the screen. And manipulate the animated properties with the desired delays.

.element {
  position: absolute;
  left: 0;
  transition: ease opacity .5s, ease left 0s;
  transition-delay: 0s, 0s;

  &:not(.is-active) {
    left: -99999px;
    opacity: 0;
    transition-delay: 0s, 0.5s;
  }
}