javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-09 08:09:32 +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; 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 // 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; @Prop({ context: 'document' }) doc!: Document;
@State() focused = false; @State() focused = false;
@State() noAnimate = true;
/** /**
* The color to use from your application's color palette. * The color to use from your application's color palette.
@ -151,6 +152,10 @@ export class Searchbar implements ComponentInterface {
componentDidLoad() { componentDidLoad() {
this.positionElements(); this.positionElements();
this.debounceChanged(); this.debounceChanged();
setTimeout(() => {
this.noAnimate = false;
}, 300);
} }
/** /**
@ -328,10 +333,13 @@ export class Searchbar implements ComponentInterface {
} }
hostData() { hostData() {
const animated = this.animated && this.config.getBoolean('animated', true);
return { return {
class: { class: {
...createColorClasses(this.color), ...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-has-value': (this.getValue() !== ''),
'searchbar-show-cancel': this.showCancelButton, 'searchbar-show-cancel': this.showCancelButton,
'searchbar-left-aligned': this.shouldAlignLeft, 'searchbar-left-aligned': this.shouldAlignLeft,