Как сделать анимацию выделения на столбце, используя таблицу Material Angular? - PullRequest
Новая
       72

Как сделать анимацию выделения на столбце, используя таблицу Material Angular?

0 голосов
/ 31 декабря 2018

У меня есть набор данных, который обновляется каждую минуту с помощью вызова API.И когда он обновляется, определенный столбец будет обновлен (здесь, имя файла), и я хочу сделать что-то вроде анимации исчезающего выделения (от серого до желтого и от желтого до серого за 1 секунду, например), чтобы уведомить пользователячто-то было изменено.

Как мне этого добиться? 

table tr:nth-child(odd) {
  background-color: #ffffff;
}
table tr:nth-child(even) {
  background-color: #f1f1f1;
}
::ng-deep .mat-sort-header-container {
justify-content: center;
}

.mat-cell .flex-stretch {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-align-self: stretch;
  -ms-flex-item-align: stretch;
  align-self: stretch;
  /* align-items center so that cell content is vertically centered */
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}
    <table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8">
    
      <ng-container matColumnDef="business_unit">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Business Unit </th>
        <td mat-cell *matCellDef="let element"> {{element.business_unit}} </td>
      </ng-container>

      <ng-container matColumnDef="file_name">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> File Name </th>
        <td mat-cell *matCellDef="let element"> {{element.file_name}} </td>
      </ng-container>
    </table>

Любая помощь приветствуется.

РЕДАКТИРОВАТЬ: Все еще не нашли решение!= /

...