javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-10 00:27:41 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore(): sync next with main branch

Browse Source
This commit is contained in:
Liam DeBeasi
2021-05-26 10:14:38 -04:00
committed by GitHub
parent 960778a36f 2933531c44
commit 7d47c91641
104 changed files with 12436 additions and 6311 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -320,7 +320,6 @@ export class Refresher implements ComponentInterface {
canStart: () => this.state !== RefresherState.Refreshing && this.state !== RefresherState.Completing && this.scrollEl!.scrollTop === 0,
onStart: (ev: GestureDetail) => {
ev.data = { animation: undefined, didStart: false, cancelled: false };
this.state = RefresherState.Pulling;
},
onMove: (ev: GestureDetail) => {
if ((ev.velocityY < 0 && this.progress === 0 && !ev.data.didStart) || ev.data.cancelled) {
@ -331,10 +330,12 @@ export class Refresher implements ComponentInterface {
if (!ev.data.didStart) {
ev.data.didStart = true;
this.state = RefresherState.Pulling;
writeTask(() => this.scrollEl!.style.setProperty('--overflow', 'hidden'));
const animationType = getRefresherAnimationType(contentEl);
const animation = createPullingAnimation(animationType, pullingRefresherIcon);
const animation = createPullingAnimation(animationType, pullingRefresherIcon, this.el);
ev.data.animation = animation;
animation.progressStart(false, 0);
this.ionStart.emit();

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

@ -15,8 +15,8 @@ export const getRefresherAnimationType = (contentEl: HTMLIonContentElement): Ref
return hasHeader ? 'translate' : 'scale';
};
export const createPullingAnimation = (type: RefresherAnimationType, pullingSpinner: HTMLElement) => {
return type === 'scale' ? createScaleAnimation(pullingSpinner) : createTranslateAnimation(pullingSpinner);
export const createPullingAnimation = (type: RefresherAnimationType, pullingSpinner: HTMLElement, refresherEl: HTMLElement) => {
return type === 'scale' ? createScaleAnimation(pullingSpinner, refresherEl) : createTranslateAnimation(pullingSpinner, refresherEl);
};
const createBaseAnimation = (pullingRefresherIcon: HTMLElement) => {
@ -85,24 +85,42 @@ const createBaseAnimation = (pullingRefresherIcon: HTMLElement) => {
return baseAnimation.addAnimation([spinnerArrowContainerAnimation, circleInnerAnimation, circleOuterAnimation]);
};
const createScaleAnimation = (pullingRefresherIcon: HTMLElement) => {
const height = pullingRefresherIcon.clientHeight;
const createScaleAnimation = (pullingRefresherIcon: HTMLElement, refresherEl: HTMLElement) => {
/**
* Do not take the height of the refresher icon
* because at this point the DOM has not updated,
* so the refresher icon is still hidden with
* display: none.
* The `ion-refresher` container height
* is roughly the amount we need to offset
* the icon by when pulling down.
*/
const height = refresherEl.clientHeight;
const spinnerAnimation = createAnimation()
.addElement(pullingRefresherIcon)
.keyframes([
{ offset: 0, transform: `scale(0) translateY(-${height + 20}px)` },
{ offset: 0, transform: `scale(0) translateY(-${height}px)` },
{ offset: 1, transform: 'scale(1) translateY(100px)' }
]);
return createBaseAnimation(pullingRefresherIcon).addAnimation([spinnerAnimation]);
};
const createTranslateAnimation = (pullingRefresherIcon: HTMLElement) => {
const height = pullingRefresherIcon.clientHeight;
const createTranslateAnimation = (pullingRefresherIcon: HTMLElement, refresherEl: HTMLElement) => {
/**
* Do not take the height of the refresher icon
* because at this point the DOM has not updated,
* so the refresher icon is still hidden with
* display: none.
* The `ion-refresher` container height
* is roughly the amount we need to offset
* the icon by when pulling down.
*/
const height = refresherEl.clientHeight;
const spinnerAnimation = createAnimation()
.addElement(pullingRefresherIcon)
.keyframes([
{ offset: 0, transform: `translateY(-${height + 20}px)` },
{ offset: 0, transform: `translateY(-${height}px)` },
{ offset: 1, transform: 'translateY(100px)' }
]);