fix(animation): change animate to willAnimate

Closes #13565

packages/core/src/components.d.ts

@@ -98,7 +98,6 @@ declare global {
   }
   namespace JSXElements {
     export interface IonActionSheetAttributes extends HTMLAttributes {
-      animate?: boolean;
       buttons?: ActionSheetButton[];
       cssClass?: string;
       enableBackdropDismiss?: boolean;
@@ -107,6 +106,7 @@ declare global {
       subTitle?: string;
       title?: string;
       translucent?: boolean;
+      willAnimate?: boolean;
     }
   }
 }
@@ -166,7 +166,6 @@ declare global {
   }
   namespace JSXElements {
     export interface IonAlertAttributes extends HTMLAttributes {
-      animate?: boolean;
       buttons?: AlertButton[];
       cssClass?: string;
       enableBackdropDismiss?: boolean;
@@ -177,6 +176,7 @@ declare global {
       subTitle?: string;
       title?: string;
       translucent?: boolean;
+      willAnimate?: boolean;
     }
   }
 }
@@ -1517,7 +1517,6 @@ declare global {
   }
   namespace JSXElements {
     export interface IonLoadingAttributes extends HTMLAttributes {
-      animate?: boolean;
       content?: string;
       cssClass?: string;
       dismissOnPageChange?: boolean;
@@ -1527,6 +1526,7 @@ declare global {
       showBackdrop?: boolean;
       spinner?: string;
       translucent?: boolean;
+      willAnimate?: boolean;
     }
   }
 }
@@ -1653,7 +1653,6 @@ declare global {
   }
   namespace JSXElements {
     export interface IonModalAttributes extends HTMLAttributes {
-      animate?: boolean;
       color?: string;
       component?: any;
       cssClass?: string;
@@ -1665,6 +1664,7 @@ declare global {
       modalId?: number;
       mode?: string;
       showBackdrop?: boolean;
+      willAnimate?: boolean;
     }
   }
 }
@@ -1880,7 +1880,6 @@ declare global {
   }
   namespace JSXElements {
     export interface IonPickerAttributes extends HTMLAttributes {
-      animate?: boolean;
       buttons?: PickerButton[];
       columns?: PickerColumn[];
       content?: string;
@@ -1892,6 +1891,7 @@ declare global {
       leaveAnimation?: AnimationBuilder;
       pickerId?: string;
       showBackdrop?: boolean;
+      willAnimate?: boolean;
     }
   }
 }
@@ -1951,7 +1951,6 @@ declare global {
   }
   namespace JSXElements {
     export interface IonPopoverAttributes extends HTMLAttributes {
-      animate?: boolean;
       color?: string;
       component?: string;
       cssClass?: string;
@@ -1965,6 +1964,7 @@ declare global {
       popoverId?: string;
       showBackdrop?: boolean;
       translucent?: boolean;
+      willAnimate?: boolean;
     }
   }
 }
@@ -3003,7 +3003,6 @@ declare global {
   }
   namespace JSXElements {
     export interface IonToastAttributes extends HTMLAttributes {
-      animate?: boolean;
       closeButtonText?: string;
       cssClass?: string;
       dismissOnPageChange?: boolean;
@@ -3015,6 +3014,7 @@ declare global {
       showCloseButton?: boolean;
       toastId?: string;
       translucent?: boolean;
+      willAnimate?: boolean;
     }
   }
 }

packages/core/src/components/action-sheet/action-sheet.tsx

@@ -104,7 +104,7 @@ export class ActionSheet {
   /**
    * Enable action-sheet animations. If false, action-sheet will not animate in
    */
-  @Prop() animate: boolean = true;
+  @Prop() willAnimate: boolean = true;
 
   /**
    * Animation to use when the action-sheet is created
@@ -138,7 +138,7 @@ export class ActionSheet {
       this.animation = animation;
 
       // Check if prop animate is false or if the config for animate is defined/false
-      if (!this.animate || (isDef(this.config.get('animate')) && this.config.get('animate') === false)) {
+      if (!this.willAnimate || (isDef(this.config.get('willAnimate')) && this.config.get('willAnimate') === false)) {
         // if the duration is 0, it won't actually animate I don't think
         // TODO - validate this
         this.animation = animation.duration(0);
@@ -168,7 +168,7 @@ export class ActionSheet {
     return this.animationCtrl.create(animationBuilder, this.el).then(animation => {
       this.animation = animation;
 
-      if (!this.animate || (isDef(this.config.get('animate')) && this.config.get('animate') === false)) {
+      if (!this.willAnimate || (isDef(this.config.get('willAnimate')) && this.config.get('willAnimate') === false)) {
         this.animation = animation.duration(0);
       }
 

packages/core/src/components/action-sheet/readme.md

@@ -7,13 +7,6 @@
 
 ## Properties
 
-#### animate
-
-boolean
-
-Enable action-sheet animations. If false, action-sheet will not animate in
-
-
 #### buttons
 
 any
@@ -70,15 +63,15 @@ boolean
 If true, action-sheet will become translucent. Requires support for backdrop-filters.
 
 
+#### willAnimate
+
+boolean
+
+Enable action-sheet animations. If false, action-sheet will not animate in
+
+
 ## Attributes
 
-#### animate
-
-boolean
-
-Enable action-sheet animations. If false, action-sheet will not animate in
-
-
 #### buttons
 
 any
@@ -135,6 +128,13 @@ boolean
 If true, action-sheet will become translucent. Requires support for backdrop-filters.
 
 
+#### willAnimate
+
+boolean
+
+Enable action-sheet animations. If false, action-sheet will not animate in
+
+
 ## Events
 
 #### ionActionSheetDidDismiss

packages/core/src/components/alert/alert.tsx

@@ -110,7 +110,7 @@ export class Alert {
   /**
    * Enable alert animations. If false, alert will not animate in
    */
-  @Prop() animate: boolean = true;
+  @Prop() willAnimate: boolean = true;
 
   /**
    * Animation to be used when the alert is shown
@@ -140,7 +140,7 @@ export class Alert {
     // build the animation and kick it off
     return this.animationCtrl.create(animationBuilder, this.el).then(animation => {
       this.animation = animation;
-      if (!this.animate) {
+      if (!this.willAnimate) {
         // if the duration is 0, it won't actually animate I don't think
         // TODO - validate this
         this.animation = animation.duration(0);

packages/core/src/components/alert/readme.md

@@ -7,13 +7,6 @@
 
 ## Properties
 
-#### animate
-
-boolean
-
-Enable alert animations. If false, alert will not animate in
-
-
 #### buttons
 
 any
@@ -84,15 +77,15 @@ boolean
 If true, alert will become translucent. Requires support for backdrop-filters.
 
 
+#### willAnimate
+
+boolean
+
+Enable alert animations. If false, alert will not animate in
+
+
 ## Attributes
 
-#### animate
-
-boolean
-
-Enable alert animations. If false, alert will not animate in
-
-
 #### buttons
 
 any
@@ -163,6 +156,13 @@ boolean
 If true, alert will become translucent. Requires support for backdrop-filters.
 
 
+#### willAnimate
+
+boolean
+
+Enable alert animations. If false, alert will not animate in
+
+
 ## Events
 
 #### ionAlertDidDismiss

packages/core/src/components/loading/loading.tsx

@@ -116,7 +116,7 @@ export class Loading {
   /**
    * Toggles whether animation should occur or not
    */
-  @Prop() animate: boolean = true;
+  @Prop() willAnimate: boolean = true;
 
   /**
    * Present a loading overlay after it has been created
@@ -138,7 +138,7 @@ export class Loading {
     // build the animation and kick it off
     return this.animationCtrl.create(animationBuilder, this.el).then(animation => {
       this.animation = animation;
-      if (!this.animate) {
+      if (!this.willAnimate) {
         // if the duration is 0, it won't actually animate I don't think
         // TODO - validate this
         this.animation = animation.duration(0);
@@ -171,7 +171,7 @@ export class Loading {
 
     return this.animationCtrl.create(animationBuilder, this.el).then(animation => {
       this.animation = animation;
-      if (!this.animate) {
+      if (!this.willAnimate) {
         // if the duration is 0, it won't actually animate I don't think
         // TODO - validate this
         this.animation = animation.duration(0);

packages/core/src/components/loading/readme.md

@@ -7,13 +7,6 @@
 
 ## Properties
 
-#### animate
-
-boolean
-
-Toggles whether animation should occur or not
-
-
 #### content
 
 string
@@ -75,15 +68,15 @@ boolean
 If true, the background will be translucent. Browser support for backdrop-filter is required for the full effect
 
 
+#### willAnimate
+
+boolean
+
+Toggles whether animation should occur or not
+
+
 ## Attributes
 
-#### animate
-
-boolean
-
-Toggles whether animation should occur or not
-
-
 #### content
 
 string
@@ -145,6 +138,13 @@ boolean
 If true, the background will be translucent. Browser support for backdrop-filter is required for the full effect
 
 
+#### willAnimate
+
+boolean
+
+Toggles whether animation should occur or not
+
+
 ## Events
 
 #### ionLoadingDidDismiss

packages/core/src/components/modal/modal.tsx

@@ -78,7 +78,7 @@ export class Modal {
 
   @Prop() enterAnimation: AnimationBuilder;
   @Prop() leaveAnimation: AnimationBuilder;
-  @Prop() animate: boolean = true;
+  @Prop() willAnimate: boolean = true;
   @Prop({ mutable: true }) delegate: FrameworkDelegate;
 
   private animation: Animation;
@@ -119,7 +119,7 @@ export class Modal {
      return this.animationCtrl.create(animationBuilder, this.el)
      .then(animation => {
       this.animation = animation;
-      if (!this.animate) this.animation = animation.duration(0);
+      if (!this.willAnimate) this.animation = animation.duration(0);
       return playAnimationAsync(animation);
     })
     .then((animation) => {
@@ -147,7 +147,7 @@ export class Modal {
     return this.animationCtrl.create(animationBuilder, this.el)
     .then(animation => {
       this.animation = animation;
-      if (!this.animate) {
+      if (!this.willAnimate) {
         this.animation = animation.duration(0);
       }
       return playAnimationAsync(animation);

packages/core/src/components/modal/readme.md

@@ -7,11 +7,6 @@
 
 ## Properties
 
-#### animate
-
-boolean
-
-
 #### color
 
 string
@@ -67,13 +62,13 @@ string
 boolean
 
 
+#### willAnimate
+
+boolean
+
+
 ## Attributes
 
-#### animate
-
-boolean
-
-
 #### color
 
 string
@@ -129,6 +124,11 @@ string
 boolean
 
 
+#### willAnimate
+
+boolean
+
+
 ## Events
 
 #### ionModalDidDismiss

packages/core/src/components/modal/test/basic/index.html

@@ -36,7 +36,7 @@
       await modalController.componentOnReady();
 
       // create component to open
-      const element = document.createElement('div');
+      const element = document.createElement('ion-page');
       element.innerHTML = `
       <ion-header>
         <ion-toolbar>

packages/core/src/components/picker/picker.tsx

@@ -78,7 +78,7 @@ export class Picker {
   @Prop() pickerId: string;
   @Prop() showBackdrop: boolean = true;
   @Prop() enableBackdropDismiss: boolean = true;
-  @Prop() animate: boolean;
+  @Prop() willAnimate: boolean = true;
 
   @Prop() buttons: PickerButton[] = [];
   @Prop() columns: PickerColumn[] = [];
@@ -100,7 +100,7 @@ export class Picker {
     // build the animation and kick it off
     return this.animationCtrl.create(animationBuilder, this.el).then(animation => {
       this.animation = animation;
-      if (!this.animate) {
+      if (!this.willAnimate) {
         // if the duration is 0, it won't actually animate I don't think
         // TODO - validate this
         this.animation = animation.duration(0);

packages/core/src/components/picker/readme.md

@@ -7,11 +7,6 @@
 
 ## Properties
 
-#### animate
-
-boolean
-
-
 #### buttons
 
 any
@@ -67,13 +62,13 @@ string
 boolean
 
 
+#### willAnimate
+
+boolean
+
+
 ## Attributes
 
-#### animate
-
-boolean
-
-
 #### buttons
 
 any
@@ -129,6 +124,11 @@ string
 boolean
 
 
+#### willAnimate
+
+boolean
+
+
 ## Events
 
 #### ionPickerDidDismiss

packages/core/src/components/popover/popover.tsx

@@ -79,7 +79,7 @@ export class Popover {
   @Prop() popoverId: string;
   @Prop() showBackdrop: boolean = true;
   @Prop() translucent: boolean = false;
-  @Prop() animate: boolean = true;
+  @Prop() willAnimate: boolean = true;
   @Prop({ mutable: true }) delegate: FrameworkDelegate;
 
   private animation: Animation;
@@ -120,7 +120,7 @@ export class Popover {
       })
       .then((animation) => {
         this.animation = animation;
-        if (!this.animate) this.animation = animation.duration(0);
+        if (!this.willAnimate) this.animation = animation.duration(0);
         return playAnimationAsync(animation);
       })
       .then((animation) => {

packages/core/src/components/popover/readme.md

@@ -7,11 +7,6 @@
 
 ## Properties
 
-#### animate
-
-boolean
-
-
 #### color
 
 string
@@ -77,13 +72,13 @@ boolean
 boolean
 
 
+#### willAnimate
+
+boolean
+
+
 ## Attributes
 
-#### animate
-
-boolean
-
-
 #### color
 
 string
@@ -149,6 +144,11 @@ boolean
 boolean
 
 
+#### willAnimate
+
+boolean
+
+
 ## Events
 
 #### ionPopoverDidDismiss

packages/core/src/components/toast/readme.md

@@ -7,11 +7,6 @@
 
 ## Properties
 
-#### animate
-
-boolean
-
-
 #### closeButtonText
 
 string
@@ -67,13 +62,13 @@ string
 boolean
 
 
+#### willAnimate
+
+boolean
+
+
 ## Attributes
 
-#### animate
-
-boolean
-
-
 #### closeButtonText
 
 string
@@ -129,6 +124,11 @@ string
 boolean
 
 
+#### willAnimate
+
+boolean
+
+
 ## Events
 
 #### ionToastDidDismiss

packages/core/src/components/toast/toast.tsx

@@ -71,7 +71,7 @@ export class Toast {
   @Prop() position: string;
   @Prop() translucent: boolean = false;
   @Prop() toastId: string;
-  @Prop() animate: boolean = true;
+  @Prop() willAnimate: boolean = true;
 
   @Prop() enterAnimation: AnimationBuilder;
   @Prop() leaveAnimation: AnimationBuilder;
@@ -90,7 +90,7 @@ export class Toast {
     // build the animation and kick it off
     return this.animationCtrl.create(animationBuilder, this.el, this.position).then(animation => {
       this.animation = animation;
-      if (!this.animate) {
+      if (!this.willAnimate) {
         // if the duration is 0, it won't actually animate I don't think
         // TODO - validate this
         this.animation = animation.duration(0);