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

refactor(animation): update animation API (#19529)

Browse Source
This commit is contained in:
Manu MA
2019-10-02 19:52:46 +02:00
committed by GitHub
parent 71b8853ff4
commit f4818a1f3a
35 changed files with 483 additions and 439 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
core/src/utils/transition/ios.transition.ts
View File

@ -214,9 +214,9 @@ export const iosTransitionAnimation = (navEl: HTMLElement, opts: TransitionOptio
}
if (!contentEl && enteringToolBarEls.length === 0 && headerEls.length === 0) {
enteringContentAnimation.addElement(enteringEl.querySelector(':scope > .ion-page, :scope > ion-nav, :scope > ion-tabs'));
enteringContentAnimation.addElement(enteringEl.querySelector(':scope > .ion-page, :scope > ion-nav, :scope > ion-tabs')!); // REVIEW
} else {
enteringContentAnimation.addElement(contentEl);
enteringContentAnimation.addElement(contentEl!); // REVIEW
enteringContentAnimation.addElement(headerEls);
}
@ -250,12 +250,12 @@ export const iosTransitionAnimation = (navEl: HTMLElement, opts: TransitionOptio
.afterStyles({ opacity: '' });
enteringTransitionCover
.addElement(enteringTransitionCoverEl)
.addElement(enteringTransitionCoverEl!) // REVIEW
.beforeClearStyles([OPACITY])
.fromTo(OPACITY, 0, 0.1);
enteringTransitionShadow
.addElement(enteringTransitionShadowEl)
.addElement(enteringTransitionShadowEl!) // REVIEW
.beforeClearStyles([OPACITY])
.fromTo(OPACITY, 0.03, 0.70);
@ -274,7 +274,7 @@ export const iosTransitionAnimation = (navEl: HTMLElement, opts: TransitionOptio
rootAnimation.addAnimation(enteringToolBar);
const enteringTitle = createAnimation();
enteringTitle.addElement(enteringToolBarEl.querySelector('ion-title'));
enteringTitle.addElement(enteringToolBarEl.querySelector('ion-title')!); // REVIEW
const enteringToolBarButtons = createAnimation();
const buttons = Array.from(enteringToolBarEl.querySelectorAll('ion-buttons,[menuToggle]'));
@ -298,7 +298,7 @@ export const iosTransitionAnimation = (navEl: HTMLElement, opts: TransitionOptio
enteringToolBarItems.addElement(enteringToolBarEl.querySelectorAll(':scope > *:not(ion-title):not(ion-buttons):not([menuToggle])'));
const enteringToolBarBg = createAnimation();
enteringToolBarBg.addElement(shadow(enteringToolBarEl).querySelector('.toolbar-background'));
enteringToolBarBg.addElement(shadow(enteringToolBarEl).querySelector('.toolbar-background')!); // REVIEW
const enteringBackButton = createAnimation();
const backButtonEl = enteringToolBarEl.querySelector('ion-back-button');
@ -345,7 +345,7 @@ export const iosTransitionAnimation = (navEl: HTMLElement, opts: TransitionOptio
if (backButtonEl && !forward) {
const enteringBackBtnText = createAnimation();
enteringBackBtnText
.addElement(shadow(backButtonEl).querySelector('.button-text'))
.addElement(shadow(backButtonEl).querySelector('.button-text')!) // REVIEW
.fromTo(`transform`, (isRTL ? 'translateX(-100px)' : 'translateX(100px)'), 'translateX(0px)');
enteringToolBar.addAnimation(enteringBackBtnText);
@ -359,7 +359,7 @@ export const iosTransitionAnimation = (navEl: HTMLElement, opts: TransitionOptio
const leavingContent = createAnimation();
const leavingContentEl = leavingEl.querySelector(':scope > ion-content');
leavingContent.addElement(leavingContentEl);
leavingContent.addElement(leavingContentEl!); // REVIEW
leavingContent.addElement(leavingEl.querySelectorAll(':scope > ion-header > *:not(ion-toolbar), :scope > ion-footer > *'));
rootAnimation.addAnimation(leavingContent);
@ -393,12 +393,12 @@ export const iosTransitionAnimation = (navEl: HTMLElement, opts: TransitionOptio
.afterStyles({ opacity: '' });
leavingTransitionCover
.addElement(leavingTransitionCoverEl)
.addElement(leavingTransitionCoverEl!) // REVIEW
.beforeClearStyles([OPACITY])
.fromTo(OPACITY, 0.1, 0);
leavingTransitionShadow
.addElement(leavingTransitionShadowEl)
.addElement(leavingTransitionShadowEl!) // REVIEW
.beforeClearStyles([OPACITY])
.fromTo(OPACITY, 0.70, 0.03);
@ -413,7 +413,7 @@ export const iosTransitionAnimation = (navEl: HTMLElement, opts: TransitionOptio
leavingToolBar.addElement(leavingToolBarEl);
const leavingTitle = createAnimation();
leavingTitle.addElement(leavingToolBarEl.querySelector('ion-title'));
leavingTitle.addElement(leavingToolBarEl.querySelector('ion-title')!); // REVIEW
const leavingToolBarButtons = createAnimation();
const buttons = leavingToolBarEl.querySelectorAll('ion-buttons,[menuToggle]');
@ -435,7 +435,7 @@ export const iosTransitionAnimation = (navEl: HTMLElement, opts: TransitionOptio
}
const leavingToolBarBg = createAnimation();
leavingToolBarBg.addElement(shadow(leavingToolBarEl).querySelector('.toolbar-background'));
leavingToolBarBg.addElement(shadow(leavingToolBarEl).querySelector('.toolbar-background')!); // REVIEW
const leavingBackButton = createAnimation();
const backButtonEl = leavingToolBarEl.querySelector('ion-back-button');
@ -472,7 +472,7 @@ export const iosTransitionAnimation = (navEl: HTMLElement, opts: TransitionOptio
if (backButtonEl && !backward) {
const leavingBackBtnText = createAnimation();
leavingBackBtnText
.addElement(shadow(backButtonEl).querySelector('.button-text'))
.addElement(shadow(backButtonEl).querySelector('.button-text')!) // REVIEW
.fromTo('transform', `translateX(${CENTER})`, `translateX(${(isRTL ? -124 : 124) + 'px'})`);
leavingToolBar.addAnimation(leavingBackBtnText);
}