Skip to content
Permalink
Browse files

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

  • Loading branch information...
adamdbradley committed Oct 30, 2018
1 parent fc64f7e commit e94b5221d4984a045190960f5dfb9fbe255b971f
Showing with 14 additions and 1 deletion.
  1. +5 −0 core/src/components/searchbar/searchbar.ios.scss
  2. +9 −1 core/src/components/searchbar/searchbar.tsx
@@ -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
// -----------------------------------------
@@ -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,

0 comments on commit e94b522

Please sign in to comment.
You can’t perform that action at this time.