javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-18 19:21:34 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(refresher): refresher completes even after switching to a new tab (#21236)

Browse Source
This commit is contained in:
Liam DeBeasi
2020-05-11 15:21:26 -04:00
committed by GitHub
parent 8e11ecc136
commit 1e6f92377a
2 changed files with 14 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
core/src/components/refresher/refresher.utils.ts
View File

@ -148,7 +148,7 @@ export const handleScrollWhileRefreshing = (
export const translateElement = (el?: HTMLElement, value?: string) => {
if (!el) { return Promise.resolve(); }
const trans = transitionEndAsync(el);
const trans = transitionEndAsync(el, 200);
writeTask(() => {
el.style.setProperty('transition', '0.2s all ease-out');
@ -181,15 +181,17 @@ export const shouldUseNativeRefresher = (referenceEl: HTMLIonRefresherElement, m
);
};
export const transitionEndAsync = (el: HTMLElement | null) => {
export const transitionEndAsync = (el: HTMLElement | null, expectedDuration = 0) => {
return new Promise(resolve => {
transitionEnd(el, resolve);
transitionEnd(el, expectedDuration, resolve);
});
};
const transitionEnd = (el: HTMLElement | null, callback: (ev?: TransitionEvent) => void) => {
const transitionEnd = (el: HTMLElement | null, expectedDuration = 0, callback: (ev?: TransitionEvent) => void) => {
let unRegTrans: (() => void) | undefined;
let animationTimeout: any;
const opts: any = { passive: true };
const ANIMATION_FALLBACK_TIMEOUT = 500;
const unregister = () => {
if (unRegTrans) {
@ -197,8 +199,8 @@ const transitionEnd = (el: HTMLElement | null, callback: (ev?: TransitionEvent)
}
};
const onTransitionEnd = (ev: Event) => {
if (el === ev.target) {
const onTransitionEnd = (ev?: Event) => {
if (ev === undefined || el === ev.target) {
unregister();
callback(ev as TransitionEvent);
}
@ -207,8 +209,13 @@ const transitionEnd = (el: HTMLElement | null, callback: (ev?: TransitionEvent)
if (el) {
el.addEventListener('webkitTransitionEnd', onTransitionEnd, opts);
el.addEventListener('transitionend', onTransitionEnd, opts);
animationTimeout = setTimeout(onTransitionEnd, expectedDuration + ANIMATION_FALLBACK_TIMEOUT);
unRegTrans = () => {
if (animationTimeout) {
clearTimeout(animationTimeout);
animationTimeout = undefined;
}
el.removeEventListener('webkitTransitionEnd', onTransitionEnd, opts);
el.removeEventListener('transitionend', onTransitionEnd, opts);
};