Angular2 Cascade Animation

Question

Я пытаюсь реализовать каскадную анимацию для списка элементов.

Я применил триггеры состояния успешно - благодаря documentation - однако все состояния элементов применяются одновременно и не каскадируются.

Моя анимация:

Ожидаемый результат:

heroes.component.ts

trigger('flyInOut', [ 
    state('in', style({ 
    transform: 'translateX(0)' 
    })), 
    transition('void => in', [ 
    style({transform: 'translateX(-100px)'}), 
    animate(500) 
    ]), 
    transition('* => void', [ 
    style({transform: 'translateX(0)'}), 
    animate(500) 
    ]) 
]) 

heroes.component.html

<li *ngFor="let hero of heroes" 
    (click)="onSelect(hero)" 
    [class.selected]="hero === selectedHero" 
    @heroState="hero === selectedHero ? 'active' : 'inactive'" 
    @flyInOut="'in'" 
    > 
    <span class="badge">{{hero.id}}</span> {{hero.name}} 
    <button class="delete" (click)="delete(hero); $event.stopPropagation()"> 
    x 
    </button> 
</li> 

Answer 1

Что вы хотите https://angular.io/api/animations/stagger.

В принципе, вы применяете анимацию к контейнеру списка (<ol> в вашем случае?), Который привязан к длине списка (или любой другой, который изменяется при изменении списка). Затем вы запрашиваете элементы ввода/вывода в списке и используете функцию шага для применения ваших анимаций в каскадировании.

Как показано в связанных документации, но изменен, чтобы получить эффект, который вы хотите (от того, что я могу видеть из GIF):

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