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

refactor(refresher): add new ios 14 pull to refresh style (#22398)

Browse Source 
resolves #22783

Co-authored-by: Liam DeBeasi <liamdebeasi@icloud.com>
This commit is contained in:
Hans Krywalsky
2021-02-17 22:14:03 +01:00
committed by GitHub
parent 75458ac7fb
commit 84d86397a7
5 changed files with 79 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,7 +1,7 @@
import { writeTask } from '@stencil/core';
import { createAnimation } from '../../utils/animation/animation';
import { componentOnReady } from '../../utils/helpers';
import { clamp, componentOnReady } from '../../utils/helpers';
import { isPlatform } from '../../utils/platform';
// MD Native Refresher
@ -124,14 +124,26 @@ export const setSpinnerOpacity = (spinner: HTMLElement, opacity: number) => {
};
export const handleScrollWhilePulling = (
spinner: HTMLElement,
ticks: NodeListOf<SVGElement>,
opacity: number,
currentTickToShow: number
numTicks: number,
pullAmount: number
) => {
const max = 1;
writeTask(() => {
setSpinnerOpacity(spinner, opacity);
ticks.forEach((el, i) => el.style.setProperty('opacity', (i <= currentTickToShow) ? '0.99' : '0'));
ticks.forEach((el, i) => {
/**
* Compute the opacity of each tick
* mark as a percentage of the pullAmount
* offset by max / numTicks so
* the tick marks are shown staggered.
*/
const min = i * (max / numTicks);
const range = max - min;
const start = pullAmount - min;
const progression = clamp(0, start / range, 1);
el.style.setProperty('opacity', progression.toString());
});
});
};
@ -146,13 +158,13 @@ export const handleScrollWhileRefreshing = (
});
};
export const translateElement = (el?: HTMLElement, value?: string) => {
export const translateElement = (el?: HTMLElement, value?: string, duration = 200) => {
if (!el) { return Promise.resolve(); }
const trans = transitionEndAsync(el, 200);
const trans = transitionEndAsync(el, duration);
writeTask(() => {
el.style.setProperty('transition', '0.2s all ease-out');
el.style.setProperty('transition', `${duration}ms all ease-out`);
if (value === undefined) {
el.style.removeProperty('transform');