Support for CSS animations?

[melv-n]

Hey there,

Currently we can already add a CSS opening animation through the likes of:

.ember-modal-dialog {
  animation: modal-open-animation 1s;
}

@keyframes modal-open-animation {
  from {
    transform: scale(.5);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/** Note: The above assumes a targetAttachment of "none", 
seeing as CSS transforms are used to position the modal (e.g. transform: translate(-50%, -50%)) */

What's seemingly more difficult is to use this for animating the closing of a modal. I see there's support for liquid-fire but it feels overkill and less performant than a good ol' CSS animation. Are there any pointers on how to achieve this?

I've tried hooking into the onClose action to apply a .is-closing class to the modal dialog, use run.later(() => this.sendAction('onClose'), 200) to delay the actual closing of the modal but have had limited success.

I'd be very keen on hearing your thoughts on this – I was surprised that CSS animations haven't been brought up before (at least to what I could find).