diff --git a/core/src/components/label/label.scss b/core/src/components/label/label.scss index 6aa467454c8..0e6cf2ce1cb 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 b9621bdb0c9..9df882eef95 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; + @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 f2f0dc3477e..2218642cf06 100644 --- a/core/src/components/label/test/standalone/index.html +++ b/core/src/components/label/test/standalone/index.html @@ -15,7 +15,7 @@

Default

Default Wrap label this label just goes on and on and on Fixed - Floating + Floating Stacked

Colors