fix(label): do not animate float labels on initial load (#16036)

ionic-team · Oct 23, 2018 · e644fc9 · e644fc9
1 parent d033a9e
commit e644fc9
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 2 deletions.
diff --git a/core/src/components/label/label.scss b/core/src/components/label/label.scss
@@ -79,3 +79,7 @@
 :host-context(.item-has-value).label-floating {
   @include transform(translate3d(0, 0, 0), scale(.8));
 }
+
+:host(.label-no-animate.label-floating) {
+  transition: none;
+}
diff --git a/core/src/components/label/label.tsx b/core/src/components/label/label.tsx
@@ -1,4 +1,4 @@
-import { Component, ComponentInterface, Element, Event, EventEmitter, Prop, Watch } from '@stencil/core';
+import { Component, ComponentInterface, Element, Event, EventEmitter, Prop, State, Watch } from '@stencil/core';
 
 import { Color, Mode, StyleEvent } from '../../interface';
 import { createColorClasses } from '../../utils/theme';
@@ -38,8 +38,20 @@ export class Label implements ComponentInterface {
    */
   @Event() ionStyle!: EventEmitter<StyleEvent>;
 
+  @State() noAnimate = false;
+
+  componentWillLoad() {
+    this.noAnimate = (this.position === 'floating');
+  }
+
   componentDidLoad() {
     this.positionChanged();
+
+    if (this.noAnimate) {
+      setTimeout(() => {
+        this.noAnimate = false;
+      }, 1000);
+    }
   }
 
   @Watch('position')
@@ -57,6 +69,7 @@ export class Label implements ComponentInterface {
       class: {
         ...createColorClasses(this.color),
         [`label-${position}`]: !!position,
+        [`label-no-animate`]: (this.noAnimate)
       }
     };
   }

diff --git a/core/src/components/label/test/standalone/index.html b/core/src/components/label/test/standalone/index.html
@@ -15,7 +15,7 @@ <h1>Default</h1>
   <ion-label>Default</ion-label>
   <ion-label>Wrap label this label just goes on and on and on</ion-label>
   <ion-label position="fixed">Fixed</ion-label>
-  <ion-label position="floating">Floating</ion-label>
+  <ion-label position="floating" style="margin-bottom: 30px;">Floating</ion-label>
   <ion-label position="stacked">Stacked</ion-label>
 
   <h1>Colors</h1>