为什么动画只触发一次？

Question

因此，在避免使用 Angular Animation 后，我想最终尝试使用它。从理论上讲，我非常喜欢这个。但似乎有一些奇怪的行为对我来说似乎没有意义。

    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

与预加载的数据完美配合。动画是交错的，一切都与第一次加载的项目有关。但是，如果我添加的 :enter 转换上没有触发器

rowAnimations

，并且随后添加的项目不会被渲染。为了更好的衡量，我添加了 stackblitz。

https://angular-animation-with-table-row-8qvh2f.stackblitz.io

Answer 1

trigger

绑定应更改以触发

trigger

。例如

[@enterAnimation]="items.length"

和

transition('* <=> *'

。在你的情况下，当它进入时 - 正如预期的那样，它只执行一次。

第二：你真的不需要

query(':self')

。可以省略

第三：您可以

animateChild()

在更高级别上控制动画并在元素级别描述元素的动画

trigger('enterAnimation', [
      transition('* <=> *', [
        query('@rowAnimations', [
          stagger(100, [
            animateChild()
          ])
        ])
      ])
....
trigger('rowAnimations', [
      transition(':enter', [
        style({ transform: 'translateX(100%)', opacity: 0 }),
          animate(
            '500ms',
            style({
              transform: 'translateX(0)',
              opacity: 1,
              'overflow-x': 'hidden',
            })
          ),
      ]),