Question

我有一个数据列表，我在弹性版式中将其显示为mat-card。由于数据很多，我只使用pagination显示一个子集。现在，我要为切换页面设置动画。

html非常简单：

<div class="container" [@pageAnimation]="(page$ | async) && (page$ | async).pageIndex">
    <mat-card class="user-card" *ngFor="let user of (users$ | async)">
        ...
    </mat-card>
</div>

我的问题是如何实际播放幻灯片动画。

我尝试过：

trigger('pageAnimation', [
  transition(':increment', [
       style({ position: 'relative' }),
       query(':enter, :leave', [
         style({
           position: 'relative',
           'background-color': 'green'
           // top: 0,
           // left: 0,
           // width: '100%'
         })
       ]),
       query(':enter', [
         style({ left: '100%'})
       ]),
       query(':leave', animateChild()),
       group([
         query(':leave', [
           animate('300ms ease-out', style({ /*left: '-100%'*/'background-color': 'red'}))
         ]),
         query(':enter', [
           animate('300ms ease-out', style({/* left: '0%'*/'background-color': 'blue'}))
         ])
       ]),
       query(':enter', animateChild()),
     ]),
     transition(':decrement', [
       style({ position: 'relative' }),
         query(':enter, :leave', [
           style({
             position: 'relative',
             top: 0,
             left: 0,
             // width: '100%'
           })
         ]),
         query(':enter', [
           style({ left: '100%'})
         ]),
         query(':leave', animateChild()),
         group([
                query(':leave', [
                animate('300ms ease-out', style({ left: '-100%'}))
                ]),
                query(':enter', [
                animate('300ms ease-out', style({ left: '0%'}))
                ])
         ]),
         query(':enter', animateChild()),
       ]),
     ]);

问题是在动画过程中，退出元素和进入元素都一起添加到了容器中，并根据flex规则一个接一个地显示。因此，如果它们的位置为relative，并向左或向右移动100％，则新元素将显示在空格之后。如果将旧元素的位置指定为absolute，则新元素可以正常工作，而旧元素可以堆叠在一起。

席卡弹性列表的动画分页

0 个答案: