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

fix(searchbar): do not animate during initial load (#16147)

Browse Source
This commit is contained in:
Adam Bradley
2018-10-30 12:50:53 -05:00
committed by GitHub
parent fc64f7e50a
commit e94b5221d4
2 changed files with 14 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
core/src/components/searchbar/searchbar.ios.scss
View File

@ -143,6 +143,11 @@
pointer-events: none;
}
:host(.searchbar-no-animate) .searchbar-search-icon,
:host(.searchbar-no-animate) .searchbar-input,
:host(.searchbar-no-animate) .searchbar-cancel-button {
transition-duration: 0ms;
}
// Searchbar Color
// -----------------------------------------

10
core/src/components/searchbar/searchbar.tsx
View File

@ -24,6 +24,7 @@ export class Searchbar implements ComponentInterface {
@Prop({ context: 'document' }) doc!: Document;
@State() focused = false;
@State() noAnimate = true;
/**
* The color to use from your application's color palette.
@ -151,6 +152,10 @@ export class Searchbar implements ComponentInterface {
componentDidLoad() {
this.positionElements();
this.debounceChanged();
setTimeout(() => {
this.noAnimate = false;
}, 300);
}
/**
@ -328,10 +333,13 @@ export class Searchbar implements ComponentInterface {
}
hostData() {
const animated = this.animated && this.config.getBoolean('animated', true);
return {
class: {
...createColorClasses(this.color),
'searchbar-animated': this.animated && this.config.getBoolean('animated', true),
'searchbar-animated': animated,
'searchbar-no-animate': animated && this.noAnimate,
'searchbar-has-value': (this.getValue() !== ''),
'searchbar-show-cancel': this.showCancelButton,
'searchbar-left-aligned': this.shouldAlignLeft,