Сброс ошеломляющей задержки анимации на вновь сгенерированных элементах

Question

Я пытаюсь реализовать пошаговую анимацию, когда моя страница загружается, получая массив пользователей из моего API, затем назначая этот массив локальной переменной, которая связана с таблицей с помощью ngFor, которая затем циклично отображает и отображает значения.

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

Я пытался использовать Angularsвстроенная функция пошагового воспроизведения с анимацией, но она не работает.Я видел некоторые отчеты GitHub, которые говорят, что это проблема с запросом.Я могу создать базовую анимацию, которая прекрасно работает, но при использовании пошагового выполнения внутри запроса анимации просто не запускаются.Вот ссылка на указанный отчет github: https://github.com/angular/angular/issues/19786

Вот мой файл scss

.userrow{
  animation: .3s ease-in-out both fade-in-entry;
  //animation-delay: .5s;
}



@keyframes fade-in-entry{
  0%{
    opacity: 0;
    transform: translateX(+100%);
  }

  100%{
    opacity:1;
    transform: translateX(0);
  }

}

@for $i from 1 through 21 {
  .userrow:nth-child(#{$i}) {
    animation-delay: #{$i * 0.2}s;
  }
}

И HTML

<tr style = "background: lightblue;" >
  <th>UserID</th>
  <th>UserName</th>
  <th>FirstName</th>
  <th>Delete</th>
</tr>

<tr *ngFor='let user of _userService.users' class="userrow">

  <td>{{user.userID}}</td>
  <td>{{user.userName}}</td>
  <td>{{user.firstName}}</td>
  <td><button (click)="deleteUser(user.userID)">Delete</button></td>


</tr>

У меня есть отдельный компонент формы, который принимает имя пользователяи имя и отправляет новый объект пользователя в базу данных.Затем ему предоставляется JSON, который включает вновь созданного пользователя, а также сгенерированный идентификационный номер.Затем я помещаю этого пользователя в локальный массив, и он добавляется в таблицу.Я хотел бы, чтобы когда пользователь добавлялся в массив, он все еще поддерживает анимацию, но появляется, как только он добавляется в массив, а не с большой задержкой, поскольку он использует предыдущую переменную задержки.

Кроме того, ятакже хотел бы иметь возможность удалять эти элементы из представления, когда пользователь нажимает кнопку «Удалить», и затем отображать в таблице изменения без обновления всей таблицы и повторного запуска анимации всех строк.