我正在使用此代码为div列表制作动画
trigger('listOfDivsInOut', [
transition('* => *', [
query(':enter', style({ opacity: 0 }), {optional: true}),
query(':enter', stagger('300ms', [
animate('1s ease-in', keyframes([
style({opacity: 0, transform: 'translateY(-75%)', offset: 0}),
style({opacity: .5, transform: 'translateY(35px)', offset: 0.3}),
style({opacity: 1, transform: 'translateY(0)', offset: 1.0}),
]))]), {optional: true}),
query(':leave', stagger('300ms', [
animate('1s ease-in', keyframes([
style({opacity: 1, transform: 'translateY(0)', offset: 0}),
style({opacity: .5, transform: 'translateY(35px)', offset: 0.3}),
style({opacity: 0, transform: 'translateY(-75%)', offset: 1.0}),
]))]), {optional: true})
])
])
<div class="row" [@listOfDivsInOut]="_customersDTO.CustomerList.length">
<div class="col-md-6" *ngFor='let c of _customersDTO.CustomerList
| paginate: { itemsPerPage: 10, currentPage: _currentpage, totalItems: _customersDTO.totalItems }'>
我在页面上进行分页,当我从页面转到另一页时,我需要在离开完成后执行输入动画。