fix: Ensure animations always have a duration

Animations with a duration of 0s might not trigger `animationend` in some cases. Defaulting to `1ms` or `0.001s` adds a single tick which should be enough to trigger the events without issues.
mainmatter · May 31, 2022 · 836be89 · 836be89
1 parent 60d72e8
commit 836be89
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 27 deletions.
diff --git a/addon-test-support/index.js b/addon-test-support/index.js
@@ -1,13 +1,13 @@
 export function setupPromiseModals(hooks) {
   hooks.beforeEach(function () {
-    document.documentElement.style.setProperty('--epm-animation-backdrop-in-duration', `0.00001s`);
-    document.documentElement.style.setProperty('--epm-animation-backdrop-out-duration', `0.00001s`);
-    document.documentElement.style.setProperty('--epm-animation-backdrop-in-delay', `0.00001s`);
-    document.documentElement.style.setProperty('--epm-animation-backdrop-out-delay', `0.00001s`);
-    document.documentElement.style.setProperty('--epm-animation-modal-in-duration', `0.00001s`);
-    document.documentElement.style.setProperty('--epm-animation-modal-out-duration', `0.00001s`);
-    document.documentElement.style.setProperty('--epm-animation-modal-in-delay', `0.00001s`);
-    document.documentElement.style.setProperty('--epm-animation-modal-out-delay', `0.00001s`);
+    document.documentElement.style.setProperty('--epm-animation-backdrop-in-duration', `0.001s`);
+    document.documentElement.style.setProperty('--epm-animation-backdrop-out-duration', `0.001s`);
+    document.documentElement.style.setProperty('--epm-animation-backdrop-in-delay', `0.001s`);
+    document.documentElement.style.setProperty('--epm-animation-backdrop-out-delay', `0.001s`);
+    document.documentElement.style.setProperty('--epm-animation-modal-in-duration', `0.001s`);
+    document.documentElement.style.setProperty('--epm-animation-modal-out-duration', `0.001s`);
+    document.documentElement.style.setProperty('--epm-animation-modal-in-delay', `0.001s`);
+    document.documentElement.style.setProperty('--epm-animation-modal-out-delay', `0.001s`);
 
     this.modals = this.owner.lookup('service:modals');
   });
@@ -18,13 +18,13 @@ export function setupPromiseModals(hooks) {
       this.modals._stack.forEach(modal => modal.close());
     }
 
-    document.documentElement.style.removeProperty('--epm-animation-backdrop-in-duration', `0.00001s`);
-    document.documentElement.style.removeProperty('--epm-animation-backdrop-out-duration', `0.00001s`);
-    document.documentElement.style.removeProperty('--epm-animation-backdrop-in-delay', `0.00001s`);
-    document.documentElement.style.removeProperty('--epm-animation-backdrop-out-delay', `0.00001s`);
-    document.documentElement.style.removeProperty('--epm-animation-modal-in-duration', `0.00001s`);
-    document.documentElement.style.removeProperty('--epm-animation-modal-out-duration', `0.00001s`);
-    document.documentElement.style.removeProperty('--epm-animation-modal-in-delay', `0.00001s`);
-    document.documentElement.style.removeProperty('--epm-animation-modal-out-delay', `0.00001s`);
+    document.documentElement.style.removeProperty('--epm-animation-backdrop-in-duration', `0.001s`);
+    document.documentElement.style.removeProperty('--epm-animation-backdrop-out-duration', `0.001s`);
+    document.documentElement.style.removeProperty('--epm-animation-backdrop-in-delay', `0.001s`);
+    document.documentElement.style.removeProperty('--epm-animation-backdrop-out-delay', `0.001s`);
+    document.documentElement.style.removeProperty('--epm-animation-modal-in-duration', `0.001s`);
+    document.documentElement.style.removeProperty('--epm-animation-modal-out-duration', `0.001s`);
+    document.documentElement.style.removeProperty('--epm-animation-modal-in-delay', `0.001s`);
+    document.documentElement.style.removeProperty('--epm-animation-modal-out-delay', `0.001s`);
   });
 }
diff --git a/addon/components/modal.js b/addon/components/modal.js
@@ -2,8 +2,8 @@ import Component from '@ember/component';
 import { set } from '@ember/object';
 import { readOnly } from '@ember/object/computed';
 import { guidFor } from '@ember/object/internals';
-import { inject as service } from '@ember/service';
 import { cancel, later } from '@ember/runloop';
+import { inject as service } from '@ember/service';
 
 import { createFocusTrap } from 'focus-trap';
 
@@ -102,8 +102,8 @@ export default Component.extend({
     set(this, 'animatingOutClass', this.outAnimationClass);
 
     const element = document.getElementById(this.modalElementId);
-    const animationDuration = window.getComputedStyle(element)['animation-duration'] ?? '0s';
-    this._timeout = later(this, 'removeModal', animationDuration.replace('s' , '') * 1000 + 1);
+    const animationDuration = window.getComputedStyle(element)['animation-duration'] ?? '0.001s';
+    this._timeout = later(this, 'removeModal', animationDuration.replace('s', '') * 1000 + 1);
 
     if (this.focusTrap) {
       this.focusTrap.deactivate({
@@ -115,6 +115,7 @@ export default Component.extend({
   },
 
   removeModal() {
+    cancel(this._timeout);
     this.modals._onModalAnimationEnd();
     this.modal?._remove();
   },

diff --git a/addon/styles/ember-promise-modals.css b/addon/styles/ember-promise-modals.css
@@ -17,14 +17,14 @@
 
 @media (prefers-reduced-motion: reduce) {
   :root {
-  --epm-animation-backdrop-in-duration: 0s;
-  --epm-animation-backdrop-out-duration: 0s;
-  --epm-animation-modal-in-duration: 0s;
-  --epm-animation-modal-out-duration: 0s;
-  --epm-animation-backdrop-in-delay: 0s;
-  --epm-animation-backdrop-out-delay: 0s;
-  --epm-animation-modal-in-delay: 0s;
-  --epm-animation-modal-out-delay: 0s;
+  --epm-animation-backdrop-in-duration: 0.001s;
+  --epm-animation-backdrop-out-duration: 0.001s;
+  --epm-animation-modal-in-duration: 0.001s;
+  --epm-animation-modal-out-duration: 0.001s;
+  --epm-animation-backdrop-in-delay: 0.001s;
+  --epm-animation-backdrop-out-delay: 0.001s;
+  --epm-animation-modal-in-delay: 0.001s;
+  --epm-animation-modal-out-delay: 0.001s;
   }
 }