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

ionic-team · Oct 2, 2019 · f4818a1 · f4818a1
1 parent 71b8853
commit f4818a1
Show file tree

Hide file tree

Showing 35 changed files with 481 additions and 437 deletions.
diff --git a/core/src/components/action-sheet/animations/ios.enter.ts b/core/src/components/action-sheet/animations/ios.enter.ts
@@ -10,11 +10,11 @@ export const iosEnterAnimation = (baseEl: HTMLElement): IonicAnimation => {
   const wrapperAnimation = createAnimation();
 
   backdropAnimation
-    .addElement(baseEl.querySelector('ion-backdrop'))
+    .addElement(baseEl.querySelector('ion-backdrop')!)
     .fromTo('opacity', 0.01, 0.4);
 
   wrapperAnimation
-    .addElement(baseEl.querySelector('.action-sheet-wrapper'))
+    .addElement(baseEl.querySelector('.action-sheet-wrapper')!)
     .fromTo('transform', 'translateY(100%)', 'translateY(0%)');
 
   return baseAnimation

diff --git a/core/src/components/action-sheet/animations/ios.leave.ts b/core/src/components/action-sheet/animations/ios.leave.ts
@@ -10,11 +10,11 @@ export const iosLeaveAnimation = (baseEl: HTMLElement): IonicAnimation => {
   const wrapperAnimation = createAnimation();
 
   backdropAnimation
-    .addElement(baseEl.querySelector('ion-backdrop'))
+    .addElement(baseEl.querySelector('ion-backdrop')!)
     .fromTo('opacity', 0.4, 0);
 
   wrapperAnimation
-    .addElement(baseEl.querySelector('.action-sheet-wrapper'))
+    .addElement(baseEl.querySelector('.action-sheet-wrapper')!)
     .fromTo('transform', 'translateY(0%)', 'translateY(100%)');
 
   return baseAnimation

diff --git a/core/src/components/action-sheet/animations/md.enter.ts b/core/src/components/action-sheet/animations/md.enter.ts
@@ -10,11 +10,11 @@ export const mdEnterAnimation = (baseEl: HTMLElement): IonicAnimation => {
   const wrapperAnimation = createAnimation();
 
   backdropAnimation
-    .addElement(baseEl.querySelector('ion-backdrop'))
+    .addElement(baseEl.querySelector('ion-backdrop')!)
     .fromTo('opacity', 0.01, 0.32);
 
   wrapperAnimation
-    .addElement(baseEl.querySelector('.action-sheet-wrapper'))
+    .addElement(baseEl.querySelector('.action-sheet-wrapper')!)
     .fromTo('transform', 'translateY(100%)', 'translateY(0%)');
 
   return baseAnimation

diff --git a/core/src/components/action-sheet/animations/md.leave.ts b/core/src/components/action-sheet/animations/md.leave.ts
@@ -10,11 +10,11 @@ export const mdLeaveAnimation = (baseEl: HTMLElement): IonicAnimation => {
   const wrapperAnimation = createAnimation();
 
   backdropAnimation
-    .addElement(baseEl.querySelector('ion-backdrop'))
+    .addElement(baseEl.querySelector('ion-backdrop')!)
     .fromTo('opacity', 0.32, 0);
 
   wrapperAnimation
-    .addElement(baseEl.querySelector('.action-sheet-wrapper'))
+    .addElement(baseEl.querySelector('.action-sheet-wrapper')!)
     .fromTo('transform', 'translateY(0%)', 'translateY(100%)');
 
   return baseAnimation

diff --git a/core/src/components/alert/animations/ios.enter.ts b/core/src/components/alert/animations/ios.enter.ts
@@ -10,14 +10,14 @@ export const iosEnterAnimation = (baseEl: HTMLElement): IonicAnimation => {
   const wrapperAnimation = createAnimation();
 
   backdropAnimation
-    .addElement(baseEl.querySelector('ion-backdrop'))
+    .addElement(baseEl.querySelector('ion-backdrop')!)
     .fromTo('opacity', 0.01, 0.3);
 
   wrapperAnimation
-    .addElement(baseEl.querySelector('.alert-wrapper'))
+    .addElement(baseEl.querySelector('.alert-wrapper')!)
     .keyframes([
-      { offset: 0, opacity: 0.01, transform: 'scale(1.1)' },
-      { offset: 1, opacity: 1, transform: 'scale(1)' }
+      { offset: 0, opacity: '0.01', transform: 'scale(1.1)' },
+      { offset: 1, opacity: '1', transform: 'scale(1)' }
     ]);
 
   return baseAnimation

diff --git a/core/src/components/alert/animations/ios.leave.ts b/core/src/components/alert/animations/ios.leave.ts
@@ -10,11 +10,11 @@ export const iosLeaveAnimation = (baseEl: HTMLElement): IonicAnimation => {
   const wrapperAnimation = createAnimation();
 
   backdropAnimation
-    .addElement(baseEl.querySelector('ion-backdrop'))
+    .addElement(baseEl.querySelector('ion-backdrop')!)
     .fromTo('opacity', 0.3, 0);
 
   wrapperAnimation
-    .addElement(baseEl.querySelector('.alert-wrapper'))
+    .addElement(baseEl.querySelector('.alert-wrapper')!)
     .keyframes([
       { offset: 0, opacity: 0.99, transform: 'scale(1)' },
       { offset: 1, opacity: 0, transform: 'scale(0.9)' }

diff --git a/core/src/components/alert/animations/md.enter.ts b/core/src/components/alert/animations/md.enter.ts
@@ -10,14 +10,14 @@ export const mdEnterAnimation = (baseEl: HTMLElement): IonicAnimation => {
   const wrapperAnimation = createAnimation();
 
   backdropAnimation
-    .addElement(baseEl.querySelector('ion-backdrop'))
+    .addElement(baseEl.querySelector('ion-backdrop')!)
     .fromTo('opacity', 0.01, 0.32);
 
   wrapperAnimation
-    .addElement(baseEl.querySelector('.alert-wrapper'))
+    .addElement(baseEl.querySelector('.alert-wrapper')!)
     .keyframes([
-      { offset: 0, opacity: 0.01, transform: 'scale(0.9)' },
-      { offset: 1, opacity: 1, transform: 'scale(1)' }
+      { offset: 0, opacity: '0.01', transform: 'scale(0.9)' },
+      { offset: 1, opacity: '1', transform: 'scale(1)' }
     ]);
 
   return baseAnimation

diff --git a/core/src/components/alert/animations/md.leave.ts b/core/src/components/alert/animations/md.leave.ts
@@ -10,11 +10,11 @@ export const mdLeaveAnimation = (baseEl: HTMLElement): IonicAnimation => {
   const wrapperAnimation = createAnimation();
 
   backdropAnimation
-    .addElement(baseEl.querySelector('ion-backdrop'))
+    .addElement(baseEl.querySelector('ion-backdrop')!)
     .fromTo('opacity', 0.32, 0);
 
   wrapperAnimation
-    .addElement(baseEl.querySelector('.alert-wrapper'))
+    .addElement(baseEl.querySelector('.alert-wrapper')!)
     .fromTo('opacity', 0.99, 0);
 
   return baseAnimation

diff --git a/core/src/components/loading/animations/ios.enter.ts b/core/src/components/loading/animations/ios.enter.ts
@@ -10,11 +10,11 @@ export const iosEnterAnimation = (baseEl: HTMLElement): IonicAnimation => {
   const wrapperAnimation = createAnimation();
 
   backdropAnimation
-    .addElement(baseEl.querySelector('ion-backdrop'))
+    .addElement(baseEl.querySelector('ion-backdrop')!)
     .fromTo('opacity', 0.01, 0.3);
 
   wrapperAnimation
-    .addElement(baseEl.querySelector('.loading-wrapper'))
+    .addElement(baseEl.querySelector('.loading-wrapper')!)
     .keyframes([
       { offset: 0, opacity: 0.01, transform: 'scale(1.1)' },
       { offset: 1, opacity: 1, transform: 'scale(1)' }

diff --git a/core/src/components/loading/animations/ios.leave.ts b/core/src/components/loading/animations/ios.leave.ts
@@ -10,11 +10,11 @@ export const iosLeaveAnimation = (baseEl: HTMLElement): IonicAnimation => {
   const wrapperAnimation = createAnimation();
 
   backdropAnimation
-    .addElement(baseEl.querySelector('ion-backdrop'))
+    .addElement(baseEl.querySelector('ion-backdrop')!)
     .fromTo('opacity', 0.3, 0);
 
   wrapperAnimation
-    .addElement(baseEl.querySelector('.loading-wrapper'))
+    .addElement(baseEl.querySelector('.loading-wrapper')!)
     .keyframes([
       { offset: 0, opacity: 0.99, transform: 'scale(1)' },
       { offset: 1, opacity: 0, transform: 'scale(0.9)' }

diff --git a/core/src/components/loading/animations/md.enter.ts b/core/src/components/loading/animations/md.enter.ts
@@ -10,11 +10,11 @@ export const mdEnterAnimation = (baseEl: HTMLElement): IonicAnimation => {
   const wrapperAnimation = createAnimation();
 
   backdropAnimation
-    .addElement(baseEl.querySelector('ion-backdrop'))
+    .addElement(baseEl.querySelector('ion-backdrop')!)
     .fromTo('opacity', 0.01, 0.32);
 
   wrapperAnimation
-    .addElement(baseEl.querySelector('.loading-wrapper'))
+    .addElement(baseEl.querySelector('.loading-wrapper')!)
     .keyframes([
       { offset: 0, opacity: 0.01, transform: 'scale(1.1)' },
       { offset: 1, opacity: 1, transform: 'scale(1)' }

diff --git a/core/src/components/loading/animations/md.leave.ts b/core/src/components/loading/animations/md.leave.ts
@@ -10,11 +10,11 @@ export const mdLeaveAnimation = (baseEl: HTMLElement): IonicAnimation => {
   const wrapperAnimation = createAnimation();
 
   backdropAnimation
-    .addElement(baseEl.querySelector('ion-backdrop'))
+    .addElement(baseEl.querySelector('ion-backdrop')!)
     .fromTo('opacity', 0.32, 0);
 
   wrapperAnimation
-    .addElement(baseEl.querySelector('.loading-wrapper'))
+    .addElement(baseEl.querySelector('.loading-wrapper')!)
     .keyframes([
       { offset: 0, opacity: 0.99, transform: 'scale(1)' },
       { offset: 1, opacity: 0, transform: 'scale(0.9)' }

diff --git a/core/src/components/menu-controller/menu-controller.ts b/core/src/components/menu-controller/menu-controller.ts
@@ -150,6 +150,6 @@ export class MenuController {
    */
   @Method()
   async registerAnimation(name: string, animation: AnimationBuilder | ((menu: MenuI) => IonicAnimation)) {
-    return menuController.registerAnimation(name, animation);
+    return menuController.registerAnimation(name, animation as any);
   }
 }
diff --git a/core/src/components/menu/menu.tsx b/core/src/components/menu/menu.tsx
@@ -434,10 +434,10 @@ export class Menu implements ComponentInterface, MenuI {
 
     this.animation
       .easing('cubic-bezier(0.4, 0.0, 0.6, 1)')
-      .onFinish(() => this.afterAnimation(shouldOpen), {
-        oneTimeCallback: true
-      })
-      .progressEnd(shouldComplete, newStepValue, 300);
+      .onFinish(
+        () => this.afterAnimation(shouldOpen),
+        { oneTimeCallback: true })
+      .progressEnd(shouldComplete ? 1 : 0, newStepValue, 300);
   }
 
   private beforeAnimation(shouldOpen: boolean) {

diff --git a/core/src/components/modal/animations/ios.enter.ts b/core/src/components/modal/animations/ios.enter.ts
@@ -10,11 +10,11 @@ export const iosEnterAnimation = (baseEl: HTMLElement): IonicAnimation => {
   const wrapperAnimation = createAnimation();
 
   backdropAnimation
-    .addElement(baseEl.querySelector('ion-backdrop'))
+    .addElement(baseEl.querySelector('ion-backdrop')!)
     .fromTo('opacity', 0.01, 0.4);
 
   wrapperAnimation
-    .addElement(baseEl.querySelector('.modal-wrapper'))
+    .addElement(baseEl.querySelector('.modal-wrapper')!)
     .beforeStyles({ 'opacity': 1 })
     .fromTo('transform', 'translateY(100%)', 'translateY(0%)');
 

diff --git a/core/src/components/modal/animations/ios.leave.ts b/core/src/components/modal/animations/ios.leave.ts
@@ -12,11 +12,11 @@ export const iosLeaveAnimation = (baseEl: HTMLElement): IonicAnimation => {
   const wrapperElRect = wrapperEl!.getBoundingClientRect();
 
   backdropAnimation
-    .addElement(baseEl.querySelector('ion-backdrop'))
+    .addElement(baseEl.querySelector('ion-backdrop')!)
     .fromTo('opacity', 0.4, 0.0);
 
   wrapperAnimation
-    .addElement(wrapperEl)
+    .addElement(wrapperEl!)
     .beforeStyles({ 'opacity': 1 })
     .fromTo('transform', 'translateY(0%)', `translateY(${(baseEl.ownerDocument as any).defaultView.innerHeight - wrapperElRect.top}px)`);
 

diff --git a/core/src/components/modal/animations/md.enter.ts b/core/src/components/modal/animations/md.enter.ts
@@ -10,11 +10,11 @@ export const mdEnterAnimation = (baseEl: HTMLElement): IonicAnimation => {
   const wrapperAnimation = createAnimation();
 
   backdropAnimation
-    .addElement(baseEl.querySelector('ion-backdrop'))
+    .addElement(baseEl.querySelector('ion-backdrop')!)
     .fromTo('opacity', 0.01, 0.32);
 
   wrapperAnimation
-    .addElement(baseEl.querySelector('.modal-wrapper'))
+    .addElement(baseEl.querySelector('.modal-wrapper')!)
     .keyframes([
       { offset: 0, opacity: 0.01, transform: 'translateY(40px)' },
       { offset: 1, opacity: 1, transform: 'translateY(0px)' }

diff --git a/core/src/components/modal/animations/md.leave.ts b/core/src/components/modal/animations/md.leave.ts
@@ -8,10 +8,10 @@ export const mdLeaveAnimation = (baseEl: HTMLElement): IonicAnimation => {
   const baseAnimation = createAnimation();
   const backdropAnimation = createAnimation();
   const wrapperAnimation = createAnimation();
-  const wrapperEl = baseEl.querySelector('.modal-wrapper');
+  const wrapperEl = baseEl.querySelector('.modal-wrapper')!;
 
   backdropAnimation
-    .addElement(baseEl.querySelector('ion-backdrop'))
+    .addElement(baseEl.querySelector('ion-backdrop')!)
     .fromTo('opacity', 0.32, 0.0);
 
   wrapperAnimation

diff --git a/core/src/components/nav/nav.tsx b/core/src/components/nav/nav.tsx
@@ -986,7 +986,7 @@ export class Nav implements NavOutlet {
         newStepValue += getTimeGivenProgression(new Point(0, 0), new Point(0.32, 0.72), new Point(0, 1), new Point(1, 1), stepValue);
       }
 
-      this.sbAni.progressEnd(shouldComplete, newStepValue, dur);
+      (this.sbAni as IonicAnimation).progressEnd(shouldComplete ? 1 : 0, newStepValue, dur);
     }
   }
 

diff --git a/core/src/components/picker/animations/ios.enter.ts b/core/src/components/picker/animations/ios.enter.ts
@@ -10,11 +10,11 @@ export const iosEnterAnimation = (baseEl: HTMLElement): IonicAnimation => {
   const wrapperAnimation = createAnimation();
 
   backdropAnimation
-    .addElement(baseEl.querySelector('ion-backdrop'))
+    .addElement(baseEl.querySelector('ion-backdrop')!)
     .fromTo('opacity', 0.01, 0.26);
 
   wrapperAnimation
-    .addElement(baseEl.querySelector('.picker-wrapper'))
+    .addElement(baseEl.querySelector('.picker-wrapper')!)
     .fromTo('transform', 'translateY(100%)', 'translateY(0%)');
 
   return baseAnimation

diff --git a/core/src/components/picker/animations/ios.leave.ts b/core/src/components/picker/animations/ios.leave.ts
@@ -10,11 +10,11 @@ export const iosLeaveAnimation = (baseEl: HTMLElement): IonicAnimation => {
   const wrapperAnimation = createAnimation();
 
   backdropAnimation
-    .addElement(baseEl.querySelector('ion-backdrop'))
+    .addElement(baseEl.querySelector('ion-backdrop')!)
     .fromTo('opacity', 0.26, 0.01);
 
   wrapperAnimation
-    .addElement(baseEl.querySelector('.picker-wrapper'))
+    .addElement(baseEl.querySelector('.picker-wrapper')!)
     .fromTo('transform', 'translateY(0%)', 'translateY(100%)');
 
   return baseAnimation

diff --git a/core/src/components/popover/animations/ios.enter.ts b/core/src/components/popover/animations/ios.enter.ts
@@ -103,11 +103,11 @@ export const iosEnterAnimation = (baseEl: HTMLElement, ev?: Event): IonicAnimati
   const wrapperAnimation = createAnimation();
 
   backdropAnimation
-    .addElement(baseEl.querySelector('ion-backdrop'))
+    .addElement(baseEl.querySelector('ion-backdrop')!)
     .fromTo('opacity', 0.01, 0.08);
 
   wrapperAnimation
-    .addElement(baseEl.querySelector('.popover-wrapper'))
+    .addElement(baseEl.querySelector('.popover-wrapper')!)
     .fromTo('opacity', 0.01, 1);
 
   return baseAnimation

diff --git a/core/src/components/popover/animations/ios.leave.ts b/core/src/components/popover/animations/ios.leave.ts
@@ -10,11 +10,11 @@ export const iosLeaveAnimation = (baseEl: HTMLElement): IonicAnimation => {
   const wrapperAnimation = createAnimation();
 
   backdropAnimation
-    .addElement(baseEl.querySelector('ion-backdrop'))
+    .addElement(baseEl.querySelector('ion-backdrop')!)
     .fromTo('opacity', 0.08, 0);
 
   wrapperAnimation
-    .addElement(baseEl.querySelector('.popover-wrapper'))
+    .addElement(baseEl.querySelector('.popover-wrapper')!)
     .fromTo('opacity', 0.99, 0);
 
   return baseAnimation

diff --git a/core/src/components/popover/animations/md.enter.ts b/core/src/components/popover/animations/md.enter.ts
@@ -85,11 +85,11 @@ export const mdEnterAnimation = (baseEl: HTMLElement, ev?: Event): IonicAnimatio
   const viewportAnimation = createAnimation();
 
   backdropAnimation
-    .addElement(baseEl.querySelector('ion-backdrop'))
+    .addElement(baseEl.querySelector('ion-backdrop')!)
     .fromTo('opacity', 0.01, 0.32);
 
   wrapperAnimation
-    .addElement(baseEl.querySelector('.popover-wrapper'))
+    .addElement(baseEl.querySelector('.popover-wrapper')!)
     .fromTo('opacity', 0.01, 1);
 
   contentAnimation
@@ -102,7 +102,7 @@ export const mdEnterAnimation = (baseEl: HTMLElement, ev?: Event): IonicAnimatio
     .fromTo('transform', 'scale(0.001)', 'scale(1)');
 
   viewportAnimation
-    .addElement(baseEl.querySelector('.popover-viewport'))
+    .addElement(baseEl.querySelector('.popover-viewport')!)
     .fromTo('opacity', 0.01, 1);
 
   return baseAnimation

diff --git a/core/src/components/popover/animations/md.leave.ts b/core/src/components/popover/animations/md.leave.ts
@@ -10,11 +10,11 @@ export const mdLeaveAnimation = (baseEl: HTMLElement): IonicAnimation => {
   const wrapperAnimation = createAnimation();
 
   backdropAnimation
-    .addElement(baseEl.querySelector('ion-backdrop'))
+    .addElement(baseEl.querySelector('ion-backdrop')!)
     .fromTo('opacity', 0.32, 0);
 
   wrapperAnimation
-    .addElement(baseEl.querySelector('.popover-wrapper'))
+    .addElement(baseEl.querySelector('.popover-wrapper')!)
     .fromTo('opacity', 0.99, 0);
 
   return baseAnimation

diff --git a/core/src/components/router-outlet/route-outlet.tsx b/core/src/components/router-outlet/route-outlet.tsx
@@ -96,7 +96,7 @@ export class RouterOutlet implements ComponentInterface, NavOutlet {
             newStepValue += getTimeGivenProgression(new Point(0, 0), new Point(0.32, 0.72), new Point(0, 1), new Point(1, 1), step);
           }
 
-          this.ani.progressEnd(shouldComplete, newStepValue, dur);
+          (this.ani as IonicAnimation).progressEnd(shouldComplete ? 1 : 0, newStepValue, dur);
 
         }
       }