각도 2 애니메이션 : 요소 전이 시간 당

Question

다음과 같은 경우를 생각하십시오 : * ngFor 루프를 사용하여 생성 된 항목 목록이 있습니다. 나는 애니메이션

<div *ngFor="let item of items" [@flyInOut]="'in'"> 

하지만 그때를 사용하여 (하나 모두에 반대)을 순차적으로 순차적으로 하나를 표시하도록하고 싶습니다 나는 각각의 주요 국가의 무효 상태를 사용하여 애니메이션을, (만들 때 그 div), 그들은 모두 같은 초기/최종 상태를 상속합니다. 그러므로 그들은 순차적으로가 아니라 모두 하나로 나타납니다. 우리가 animation delay 을 사용 할 수 있으며, 이러한 지연은 ngFor 루프로 지정해야하지만 그것이 작동하기에 운이 없었로

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

나는 지연을 지정할 수 있기를 바랍니다. 제한된 숫자의 인스턴스 만 있기 때문에 트리거 (예 : flyInOut1, flyInOut1 등)를 하드 코딩한다고 생각했지만 실제로는 나쁜 습관입니다.

더 나은 해결책이 있습니까?

Answer 1

괜찮은 애니메이션은 이제 각도 4로 지원되며 새로운 "쿼리"기능의 일부입니다.

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 })) 
     ]) 
    ]) 
    ]) 

Official documentation

Nice tutorial here