Add css transitions to Atom modals


#1

I was wondering if anyone had ever successfully added css transitions to have Atom modals fade in. They seem to be resisting everything I try.


#2

Something like this works, but there’s a lot of limitations:

@keyframes slide-in {
  0% {
    top: -350px;
  }
  100% {
    top: -52px;
  }
}

@keyframes slide-out {
  0% {
    top: -52px;
    opacity: 1;
  }
  99% {
    top: -350px;
    opacity: 1;
  }
  100% {
    top: -350px;
    opacity: 0;
  }
}

atom-panel.modal.overlay:not([style]) {
  animation: slide-in 0.8s forwards;
}

atom-panel.modal.overlay[style] {
  display: block !important;
  pointer-events: none;
  animation: slide-out 0.8s forwards;
}
  1. Using CSS transforms for animation is better but when using a translation, the ::after element which is used for the modal’s background overlay won’t appear until the animation ends and the transform removed.
  2. Since the modal display is toggled using a style="display: none;" there’s no way to have a fade out transition as the element is immediately hidden except by using a display: block !important. But that means that the overlay and the modals will still be visible, so opacity and pointer-events must be used to ensure that the hidden modal doesn’t interact.
  3. There’s some positioning issues probably due to the use of the forwards animation option, hence the top: -52px that should be top: 0 in reality.

#3

Thanks, I think this will help me a lot!