离开完成后如何调用角度动画进入

时间:2019-08-19 22:00:20

标签: angular animation

我正在使用此代码为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 }'>

我在页面上进行分页,当我从页面转到另一页时,我需要在离开完成后执行输入动画。

0 个答案:

没有答案