From e644fc924605c857aecb677f1f8758675bcd47ec Mon Sep 17 00:00:00 2001
From: Adam Bradley <adamdbradley@users.noreply.github.com>
Date: Mon, 22 Oct 2018 20:11:46 -0500
Subject: [PATCH] fix(label): do not animate float labels on initial load
 (#16036)

---
 core/src/components/label/label.scss              |  4 ++++
 core/src/components/label/label.tsx               | 15 ++++++++++++++-
 .../components/label/test/standalone/index.html   |  2 +-
 3 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/core/src/components/label/label.scss b/core/src/components/label/label.scss
index 6aa467454c..0e6cf2ce1c 100644
--- 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
index b9621bdb0c..9df882eef9 100644
--- 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
index f2f0dc3477..2218642cf0 100644
--- a/core/src/components/label/test/standalone/index.html
+++ b/core/src/components/label/test/standalone/index.html
@@ -15,7 +15,7 @@
   <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>