Angular 为什么动画只触发一次

因此，在避免使用Angular 动画之后，我想最终try 使用它.从理论上讲，我非常喜欢这个.但似乎有一些奇怪的行为在我看来是没有道理的.

    animations: [
        trigger('enterAnimation', [
          transition(':enter', [
            query(':self, td', [
              style({ transform: 'translateX(100%)', opacity: 0 }),
              stagger(100, [
                animate(
                  '500ms',
                  style({
                    transform: 'translateX(0)',
                    opacity: 1,
                    'overflow-x': 'hidden',
                  })
                ),
              ]),
            ]),
          ]),
        ]),
    trigger('rowAnimations', [ //NOTE: I need to include this, otherwise manually added items do not work
      transition(':enter', [
        style({ transform: 'translateX(100%)', opacity: 0 }),
        query(':self', [
          animate(
            '500ms',
            style({
              transform: 'translateX(0)',
              opacity: 1,
              'overflow-x': 'hidden',
            })
          ),
        ]),
      ]),
      transition(':leave', [
        query(':self', [
          style({
            transform: 'translateX(0)',
            opacity: 1,
            overflow: 'hidden',
            width: '100%',
            height: '*',
          }),
          animate('500ms', style({ transform: 'translateX(50%)', opacity: 0 })),
        ]),
      ]),
    ]),
  ],

触发器动画enterAnimation对于预加载的数据工作得非常好.动画是交错的，一切都与第一负荷的项目.然而，如果没有触发器rowAnimations，我添加的:enter过渡和随后添加的项目不会被呈现.我还加上了突袭.

https://stackblitz.com/edit/angular-animation-with-table-row-8qvh2f?file=src%2Fapp%2Fapp.component.ts个

编辑:解决方案:

<table [@tableAnimations]="items.length" id="customers">
  <tr>
    <th>Name</th>
    <th>Country</th>
  </tr>
  <ng-container *ngFor="let o of items; let i = index">
    <tr class="data" [@rowAnimations]>
      <td>{{ o.Name }}</td>
      <td>{{ o.Country }}</td>
    </tr>
  </ng-container>
</table>

正如Andrei在解决方案中建议的那样，我们希望添加一个超过:enter Select 器的触发器.因此，绑定到数组长度会更简单.就其本身而言，它并没有起到多大作用.同样，如所建议的，这是通过转换规则* <=> *来解决的，这意味着绑定到触发器的任何值都将触发动画.

      transition('* <=> *', [
        query('@rowAnimations', [stagger(100, [animateChild()])]),
      ]),

如果没有过渡规则，行动画不会以交错方式触发，而是全部并行触发.回想起来，这是有道理的.