Angular 9 动画不适用于动态数据

Question

我正在尝试编写一个看起来像电视上的组件，当体育比赛结果将逐行飞行并构建结果时 table。但现在我有一些 Angular 动画“副作用”。

我的架构是这样的：

Scoreboard
    -- View results component
    -- View time keeping component
    -- View xyz component

计分板是通过 Websocket 服务接收数据的主要组件。根据收到的数据动态创建视图组件 (createComponent(...)) 并显示收到的数据。一切都很好。现在我正在尝试添加一些不错的动画效果，但这并不像预期的那样有效。当从 Websocket 服务接收到数据时，所有数据都会立即显示（没有任何动画）。

我试图将其简化为如下所示的示例：

import { Component, OnInit } from "@angular/core";
import { trigger, transition, style, animate, query, stagger } from "@angular/animations";

@Component({
    selector: "my-app",
    templateUrl: "./app.component.html",
    animations: [
        trigger("listAnimation", [
        transition("* => *", [
            // each time the binding value changes
            query(
            ":leave",
            [stagger(100, [animate("0.5s", style({ opacity: 0 }))])],
            { optional: true }
            ),
            query(
            ":enter",
            [
                style({ opacity: 0 }),
                stagger(100, [animate("0.5s", style({ opacity: 1 }))])
            ],
            { optional: true }
            )
        ])
        ])
    ],
})
export class AppComponent {
    items = ["a", "b", "c"];

    ngOnInit() {}

    i = 0;

    ngAfterViewInit() {
        setInterval(() => {
        this.items = this.i++ % 2 == 0 ? ["1", "2", "3"] : ["x", "y", "z"];
        }, 3000);
    }
}

组件已创建并显示初始动画，但是当数组在 setInterval() 中更改时，视图更改时没有任何动画。为什么它的行为如此？或者更好：我的错误在哪里以及如何解决？

请参阅 https://stackblitz.com/edit/angular-list-animations-dndsja?file=app%2Fapp.component.ts 的工作示例。

Answer 1

Demo

存在多个问题。

第一个是您正在尝试为 <tr> 标签制作动画，我不建议这样做，因为生成的 dom 与模板不同。

所以我切换到基本的 <div> 标签来解决这个问题。

第二个是你的数组永远不会为空，这就是为什么没有离开动画的原因。

所以我使用 setTimeout 函数将它的值暂时设置为一个空数组。

    setInterval(() => {
      this.items = [];
      setTimeout(() => {
        this.items = this.i++ % 2 == 0 ? ["1", "2", "3"] : ["x", "y", "z"];
      }, 0);
    }, 3000);

第三个问题是动画不同步，所以我必须给交错动画添加延迟才能同步。

我还对动画进行了各种调整，使其看起来不错。

  animations: [
    trigger("listAnimation", [
      transition("* => *", [
        // each time the binding value changes
        group([
          query(
            ":leave",
            [stagger(100, [animate("0.5s", style({ opacity: 0 }))])],
            { optional: true }
          ),
          query(
            ":enter",
            [
              style({ opacity: 0, height: 0, visibility: 'hidden' }),
              stagger(100, [
                animate("0s 1.5s", style({})),
                style({ height: "*", visibility: 'visible' }),
                animate(".5s", style({ opacity: 1 }))
              ])
            ],
            { optional: true }
          )
        ])
      ])
    ])
  ],

注意：我还没有弄清楚在控制台中抛出的错误。

Angular 9 动画不适用于动态数据

Angular 9 animation wont work with dynamic data

angular

angular-animations