From 836be8918b385a140513cd62704ae8bbe1c544a5 Mon Sep 17 00:00:00 2001 From: Florian Pichler Date: Fri, 27 May 2022 18:52:59 +0200 Subject: [PATCH] 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. --- addon-test-support/index.js | 32 +++++++++++++-------------- addon/components/modal.js | 7 +++--- addon/styles/ember-promise-modals.css | 16 +++++++------- 3 files changed, 28 insertions(+), 27 deletions(-) diff --git a/addon-test-support/index.js b/addon-test-support/index.js index c77e11c4..bedf81b8 100644 --- 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 index 900ded94..6c08d9ac 100644 --- 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 index c3622f66..517ebe49 100644 --- 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; } }