Используйте * ngFor index для расчета задержки анимации - PullRequest
Новая
       8

Используйте * ngFor index для расчета задержки анимации

0 голосов
/ 05 сентября 2018

Может показаться дубликатом этого вопроса, но на самом деле я пытаюсь повлиять на свойство animation-delay, а не на саму синхронизацию анимации.

У меня есть шаблон Angular, который создает элементы списка, просматривая их по очереди: 

<div class="list-item" *ngFor="let item of items; let i = index" [attr.data-index]="i" style="animation-delay: {{ (i) + 's' }}"></div>

Как видите, у меня уже есть индекс, и я надеялся использовать его для увеличения задержки анимации для каждого элемента. Но когда я тестирую в chrome, свойство стиля даже не вычисляется, даже если атрибут индекса применяется правильно. Анимация, которую я указал в CSS, работает нормально, но задержка не применяется: 

.list-item {
  animation: appear 0.3s ease-out forwards;
}

@keyframes appear
{
  0%
  {
    top: 550px;
    opacity: 0;
  }
  10%
  {
    opacity: 1;
  }
  100%
  {
    top: 30px;
    opacity: 1;
  }
}

1 Ответ

0 голосов
/ 05 сентября 2018

Попробуйте использовать директиву ngStyle: 

[ngStyle]="{'animation-delay': i + 's'}"

Надеюсь, что это хорошо, если нет, поделитесь, пожалуйста, рабочим примером на stackblitz

...