javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-19 03:32:21 +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

2
core/src/components/refresher/refresher.tsx
View File

@ -149,7 +149,7 @@ export class Refresher implements ComponentInterface {
if (getIonMode(this) === 'ios') { if (getIonMode(this) === 'ios') {
await translateElement(el, undefined); await translateElement(el, undefined);
} else { } else {
await transitionEndAsync(this.el.querySelector('.refresher-refreshing-icon')); await transitionEndAsync(this.el.querySelector('.refresher-refreshing-icon'), 200);
} }
this.didRefresh = false; this.didRefresh = false;

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

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