javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

poc using animations with any lib

Browse Source
This commit is contained in:
Liam DeBeasi
2023-06-09 09:27:55 -04:00
parent 3e191df3dd
commit a3bc83a1e6
4 changed files with 70 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
core/src/components/alert/test/trigger/index.html
View File

@@ -11,6 +11,13 @@
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
<script src="../../../../../scripts/testing/scripts.js"></script>
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
<script type="module">
import * as motion from 'https://esm.run/motion';
window.motionOne = motion;
</script>
</head>
<body>
@@ -23,25 +30,47 @@
<ion-content class="ion-padding">
<ion-button id="default">Open Alert</ion-button>
<ion-button id="timeout">Open Alert, Close After 500ms</ion-button>
<ion-alert id="default-alert" trigger="default" header="Alert" message="Hello World!"></ion-alert>
<ion-alert id="timeout-alert" trigger="timeout" header="Alert" message="Hello World!"></ion-alert>
<ion-alert id="custom-alert" trigger="default" header="Alert" message="Hello World!"></ion-alert>
</ion-content>
</ion-app>
<script>
const defaultAlert = document.querySelector('#default-alert');
const timeoutAlert = document.querySelector('#timeout-alert');
const customAlert = document.querySelector('#custom-alert');
defaultAlert.buttons = ['OK'];
timeoutAlert.buttons = ['OK'];
customAlert.enterAnimation = async (el, opts, done) => {
const { animate } = window.motionOne;
const backdropAni = animate('#custom-alert ion-backdrop', {
opacity: 'var(--backdrop-opacity)'
});
timeoutAlert.addEventListener('didPresent', () => {
setTimeout(() => {
timeoutAlert.dismiss();
}, 500);
});
const wrapperAni = animate('#custom-alert .alert-wrapper', {
opacity: 1,
transform: ['scale(1.5)', 'scale(1)']
})
await Promise.all([wrapperAni.finished, backdropAni.finished]);
done();
}
customAlert.leaveAnimation = async (el, opts, done) => {
const { animate } = window.motionOne;
const backdropAni = animate('#custom-alert ion-backdrop', {
opacity: 0
});
const wrapperAni = animate('#custom-alert .alert-wrapper', {
opacity: 0,
transform: 'scale(0.5)'
})
await Promise.all([wrapperAni.finished, backdropAni.finished]);
done();
}
customAlert.buttons = ['OK'];
</script>
</body>
</html>

3
core/src/components/modal/animations/ios.leave.ts
View File

@@ -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 } =

2
core/src/utils/animation/animation-interface.ts
View File

@@ -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;

43
core/src/utils/overlays.ts
View File

@@ -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;
};