Angular Material Table，通过订阅对表进行动画更改

Question

举一个我正在尝试做的事情的例子:

我有一个 Angular Material 表，它源自一个扩展 DataSource 的类。 DataSource上的连接方法正在订阅一些数据(例如 Firestore)。

当其他地方的数据发生变化时， Material 表会更新屏幕上的表。那里没问题。我真正想做的是在屏幕上闪烁更改(或通过动画指示)，该特定项目已更改。

现实世界的例子是英超足球比赛，随着比赛期间比分的变化，订阅的比分变化(可观察)将使用一些动画(例如 1 秒的颜色变化)向用户提供反馈。

我已经尝试过:

 <ng-container matColumnDef="lost">
    <mat-header-cell *matHeaderCellDef>Score</mat-header-cell>
    <mat-cell *matCellDef="let sc"  [@changeState]="sc.score">{{ sc.score }</mat-cell>
  </ng-container>

与 sc.score是trigger状态。并制作如下动画:

trigger('changeState', [
      state('inactive', style({
        backgroundColor: '#ff0000',
        transform: 'scale(1)'
      })),
      state('active',   style({
        backgroundColor: '#00ff00',
        transform: 'scale(1.1)'
      })),
      transition('* <=> *', animate('5000ms ease-in'))
    ])

(这不是我需要的，只是玩动画)。由于值的变化是状态，我使用了 * <=> * 的转换，希望对任何事情都有意义。至于州，我不知道在州名称中放置什么，需要类似 :beforechange 的东西。和:afterchange 。即使没有状态，我也预计该值会在 5 秒后缓和(但它立即发生。

我浏览了互联网，令我惊讶的是我找不到有人想要同样的东西的例子(除非我不擅长谷歌搜索)。

Answer 1

我不确定你的具体问题，因为我最初认为名称是在某个地方预定义的，但实际上这些是你选择的名称(这是我从这一切中学到的)，然后你用标签将它们绑定(bind)到你的 HTML 上。这是来自 Angular 动画文档。

An animation state is a string value that you define in yourapplication code. In the example above, the states 'active' and'inactive' are based on the logical state of hero objects.

可以在此处找到示例
https://angular.io/guide/animations

我添加了行转换 paraphrasing from this random Angular Github issue

首先创建一个文件来包含您的动画(在本例中是一个简单的从左侧滑入的动画)

import { trigger, sequence, state, animate, transition, style } from '@angular/animations';

export const rowsAnimation = 
    trigger('rowsAnimation', [
      transition('void => *', [
        style({ height: '*', opacity: '0', transform: 'translateX(-550px)', 'box-shadow': 'none' }),
        sequence([
          animate(".35s ease", style({ height: '*', opacity: '.2', transform: 'translateX(0)', 'box-shadow': 'none'  })),
          animate(".35s ease", style({ height: '*', opacity: 1, transform: 'translateX(0)' }))
        ])
      ])
    ]);

然后在您拥有表格的页面上，您需要编辑 typescript 文件以声明该页面的动画(可能有一种全局方法可以做到这一点，但我不确定)

import { rowsAnimation } from './animations/template.animations';

@Component({
  selector: 'material-app',
  templateUrl: 'app.component.html',
  animations: [rowsAnimation],
})

然后在您的模板/html 文件上将动画添加到 <mat-row

<mat-row [@rowsAnimation]="" *matRowDef="let row; columns: displayedColumns;"</matrow>

当添加项目时(我的项目是使用可观察主题作为数据源绑定(bind)的)，文本从左侧飞入。