Блог

Как я могу сделать плавный переход между 2 элементами с помощью *ngIf?

 // my.component.html
<ion-toolbar class="toolbar" *ngIf="!showSearchbar">
    <ion-buttons slot="start">
        <ion-back-button *ngIf="canGoBack"></ion-back-button>
        <ion-menu-button *ngIf="!canGoBack"></ion-menu-button>
    </ion-buttons>

    <ion-buttons slot="primary">
        <ion-button (click)="showSearch()">
            <ion-icon slot="icon-only" ios="search" md="search-sharp"></ion-icon>
        </ion-button>
    </ion-buttons>

    <ion-title>{{'lbl_client_search2' | getlabel}}</ion-title>
</ion-toolbar>

<ion-toolbar class="toolbar" *ngIf="showSearchbar">
    <ion-buttons slot="start">
        <ion-button (click)="showSearch(false)">
            <ion-icon slot="icon-only" name="arrow-back"></ion-icon>
        </ion-button>
    </ion-buttons>

    <ion-input #searchInput autofocus debounce="1000" inputmode="search" placeholder="Buscar cliente" (ionChange)="search($event)"></ion-input>
</ion-toolbar>

// my.component.ts
showSearchbar: Boolean = false;
...
async showSearch(show: boolean = true) {
    this.showSearchbar = show;
}
  

Примечание: это то, что он должен делать: https://material.io/design/navigation/search.html#expandable-search