Анимировать строку при изменении или добавлении

Question

Я пытаюсь анимировать строку в таблице mat, когда она добавляется или когда она изменяется. У меня есть следующие анимации:

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

export const rowUpdate =
  trigger('rowUpdate', [
    transition('void => *', animate('5000ms', keyframes([
      style({backgroundColor: 'initial', boxShadow: 'none', offset: 0} ),
      style({backgroundColor: 'red', boxShadow: '0 0 5px red', offset: 0.1} ),
      style({backgroundColor: 'initial', boxShadow: 'none', offset: 1} ),
    ])))
  ]);

И я вызываю это на HTML:

<tr mat-row *matRowDef="let row; columns: displayedColumns;" [@rowUpdate]="">

Когда я изменяю или обновляю строку Это работает правильно, проблема в том, что я могу скрывать / показывать столбцы, и когда я добавляю новый столбец, все таблицы выделяются, и я хочу, чтобы это происходило только при добавлении / изменении строки, а не при добавлении новых столбцов.

Есть идеи, как я могу это контролировать?

РЕДАКТИРОВАТЬ 1: я пробовал это решение для: hightlight через css

Но у меня есть другая проблема, когда я сортирую таблицу, анимация появляется снова и я не хочу этого Я пытался удалить класс, но не смог.