stagger — Angular | Spec-Zone.ru

Используйте внутри вызова анимации query(), чтобы задать временную паузу после анимации каждого найденного элемента.

Предупреждение об устаревании

Вместо этого используйте animate.enter или animate.leave. Планируется удалить в версии 23

API

function stagger(
  timings: string | number,
  animation: AnimationMetadata | AnimationMetadata[],
): AnimationStaggerMetadata;

@deprecated

Вместо этого используйте animate.enter или animate.leave. Планируется удалить в версии 23

@paramtimingsstring | number

Значение задержки.

@paramanimationAnimationMetadata | AnimationMetadata[]

Один или несколько шагов анимации.

@returnsAnimationStaggerMetadata

Объект, содержащий данные о поэтапном выполнении.

Примечания по использованию

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

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

<!-- list.component.html -->
<button (click)="toggle()">Show / Hide Items</button>
<hr />
<div [@listAnimation]="items.length">
  @for(item of items; track $index) {
     <div>{{ item }}</div>
  }
</div>

Код компонента:

import {trigger, transition, style, animate, query, stagger} from '@angular/animations';
@Component({
  templateUrl: 'list.component.html',
  animations: [
    trigger('listAnimation', [
    ...
    ])
  ]
})
class ListComponent {
  items = [];

  showItems() {
    this.items = [0,1,2,3,4];
  }

  hideItems() {
    this.items = [];
  }

  toggle() {
    this.items.length ? this.hideItems() : this.showItems();
   }
 }

Код триггера анимации:

trigger('listAnimation', [
  transition('* => *', [ // each time the binding value changes
    query(':leave', [
      stagger(100, [
        animate('0.5s', style({ opacity: 0 }))
      ])
    ]),
    query(':enter', [
      style({ opacity: 0 }),
      stagger(100, [
        animate('0.5s', style({ opacity: 1 }))
      ])
    ])
  ])
])