javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-18 11:17:19 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Adam Bradley
2018-10-22 20:11:46 -05:00
committed by GitHub
parent d033a9e544
commit e644fc9246
3 changed files with 19 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
core/src/components/label/label.scss
View File

@ -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;
}

15
core/src/components/label/label.tsx
View File

@ -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)
}
};
}

2
core/src/components/label/test/standalone/index.html
View File

@ -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>