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

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 12704 additions and 6579 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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)' }
]);