From a3bc83a1e60e5e6b5ea1c808033de8a87f9c7592 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Fri, 9 Jun 2023 09:27:55 -0400 Subject: [PATCH] poc using animations with any lib --- .../components/alert/test/trigger/index.html | 53 ++++++++++++++----- .../components/modal/animations/ios.leave.ts | 3 +- .../utils/animation/animation-interface.ts | 2 +- core/src/utils/overlays.ts | 43 +++++++++------ 4 files changed, 70 insertions(+), 31 deletions(-) diff --git a/core/src/components/alert/test/trigger/index.html b/core/src/components/alert/test/trigger/index.html index 233b05fc93..d2d7bc3b22 100644 --- a/core/src/components/alert/test/trigger/index.html +++ b/core/src/components/alert/test/trigger/index.html @@ -11,6 +11,13 @@ + + + @@ -23,25 +30,47 @@ Open Alert - Open Alert, Close After 500ms - - + diff --git a/core/src/components/modal/animations/ios.leave.ts b/core/src/components/modal/animations/ios.leave.ts index 85b4aaccda..257850d966 100644 --- a/core/src/components/modal/animations/ios.leave.ts +++ b/core/src/components/modal/animations/ios.leave.ts @@ -17,7 +17,8 @@ const createLeaveAnimation = () => { /** * iOS Modal Leave Animation */ -export const iosLeaveAnimation = (baseEl: HTMLElement, opts: ModalAnimationOptions, duration = 500): Animation => { +export const iosLeaveAnimation = (baseEl: HTMLElement, opts: ModalAnimationOptions): Animation => { + const duration = 500; const { presentingEl, currentBreakpoint } = opts; const root = getElementRoot(baseEl); const { wrapperAnimation, backdropAnimation } = diff --git a/core/src/utils/animation/animation-interface.ts b/core/src/utils/animation/animation-interface.ts index b28b9fdd3d..447cac755c 100644 --- a/core/src/utils/animation/animation-interface.ts +++ b/core/src/utils/animation/animation-interface.ts @@ -264,4 +264,4 @@ export type AnimationPlayTo = 'start' | 'end'; export type AnimationDirection = 'normal' | 'reverse' | 'alternate' | 'alternate-reverse'; export type AnimationFill = 'auto' | 'none' | 'forwards' | 'backwards' | 'both'; -export type AnimationBuilder = (baseEl: any, opts?: any) => Animation; +export type AnimationBuilder = (baseEl: any, opts?: any, done?: () => void) => Animation; diff --git a/core/src/utils/overlays.ts b/core/src/utils/overlays.ts index 3f8c83d59d..243d3a9b9c 100644 --- a/core/src/utils/overlays.ts +++ b/core/src/utils/overlays.ts @@ -583,26 +583,35 @@ const overlayAnimation = async ( baseEl.classList.remove('overlay-hidden'); const aniRoot = overlay.el; - const animation = animationBuilder(aniRoot, opts); - if (!overlay.animated || !config.getBoolean('animated', true)) { - animation.duration(0); + let resolvePromise; + let promise = new Promise((resolve) => { + resolvePromise = () => { resolve(true) }; + }) + + const animation = animationBuilder(aniRoot, opts, resolvePromise); + if (animation.beforeAddWrite === undefined) { + await promise; + } else { + if (!overlay.animated || !config.getBoolean('animated', true)) { + animation.duration(0); + } + + if (overlay.keyboardClose) { + animation.beforeAddWrite(() => { + const activeElement = baseEl.ownerDocument!.activeElement as HTMLElement; + if (activeElement?.matches('input,ion-input, ion-textarea')) { + activeElement.blur(); + } + }); + } + + const activeAni = activeAnimations.get(overlay) || []; + activeAnimations.set(overlay, [...activeAni, animation]); + + await animation.play(); } - if (overlay.keyboardClose) { - animation.beforeAddWrite(() => { - const activeElement = baseEl.ownerDocument!.activeElement as HTMLElement; - if (activeElement?.matches('input,ion-input, ion-textarea')) { - activeElement.blur(); - } - }); - } - - const activeAni = activeAnimations.get(overlay) || []; - activeAnimations.set(overlay, [...activeAni, animation]); - - await animation.play(); - return true; };