app.component.ts
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.sass'],
animations: [
trigger('animateAppear', [
transition('* <=> *', [
query(
':enter',
[
style({ opacity: 0, transform: 'translateY(-15px)' }),
stagger(
'50ms',
animate(
'550ms ease-out',
style({ opacity: 1, transform: 'translateY(0px)' })
)
)
],
{ optional: true }
),
query(':leave', animate('50ms', style({ opacity: 0 })), {
optional: true
}),
query(
':leave',
[
style({ opacity: 0, transform: 'translateY(-15px)' }),
stagger(
'50ms',
animate(
'550ms ease-out',
style({ opacity: 1, transform: 'translateY(0px)' })
)
)
],
{ optional: true }
)
])
])
]
})
есть pipe который фильтрует текст
search.pipe.ts
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'search'
})
export class SearchPipe implements PipeTransform {
transform(ninjas: any, words: any): any {
if (words === undefined ) { return ninjas; }
return ninjas.filter( ninja => {
return ninja.assocProducts.toLowerCase().includes( words.toLowerCase() );
});
}
}
я анимировал фильтрацию добавив @animateAppear
<div class="container" [@animateAppear]='[words]'>
app.component.html
<!-- animation block -->
<div class="container" [@animateAppear]='[words]'>
<!-- ngModel input filter Data -->
<input type="text" [(ngModel)]="words">
<!-- For -->
<div *ngFor="let product of products | search:words">
<!-- Template -->
<img class="col-md-6" src="{{ 'https:' + product.primaryImageUrl }}" width="50px" height="50px">
<div class="col-md-6">{{ product.assocProducts }}</div>
</div>
</div>
но это все работает не корректно хотелось бы реализовать следующие ,
когда пользователь вводит текст чтобы отфильтрованные товары которые должны удалиться из DOM search:words
с начало плавно стали opacity: 0;
затем
height: 0;
а только потом исчезали из DOM, и когда они становились валидные то наоборот сначало height: *;
а потом opacity: 1;
,
как это можно реализовать ?