각도 2 stagger 목록 애니메이션

Question

동적 목록으로 내 앱에서 애니메이션을 비틀 거리려고합니다. 가능한 경우 애니메이션을 입력하고 나가고 싶습니다.하지만 작업을 시작하려면 들어가기 만하면됩니다.

animations: [ 
    trigger('slideIn', [ 
     transition(':enter', [ 
      style({ 
       transform: 'translate3d(0,-10px,0)', 
       opacity: 0 
      }), 
      animate('0.1s', style({ 
       transform: 'translate3d(0,0,0)', 
       opacity: 1 
      })) 
     ]) 
    ]) 
    ] 

위는 실행할 수없는 애니메이션 코드이며 아래는 템플릿에 구현 한 것입니다.

어디에서 잘못했는지 알려주세요.

Answer 1

아직 어떤 애니메이션에게 자신을 수행하지만, 따라하지 않았이 대신 같아야합니다 https://www.yearofmoo.com/2017/06/new-wave-of-animation-features.html#space-things-out-with-stagger

귀하의 코드 : 이미

있어 무엇에 query 수준을 추가

animations: [ 
trigger('listAnimation', [ 
    transition('* => *', [ 
    // remember that :enter is a special 
    // selector that will return each 
    // newly inserted node in the ngFor list 
    query(':enter', [ 
     style({ 
      transform: 'translate3d(0,-10px,0)', 
      opacity: 0 
     }), 
     animate('0.1s', style({ 
      transform: 'translate3d(0,0,0)', 
      opacity: 1 
     })) 
    ]) 
]) 
] 

Answer 2

문제점이 무엇인지 깨달았습니다. 애니메이션을 실행할 때 for 루프가 부모 div에 설정해야하는 구성 요소에 직접 바인딩되면 완벽하게 작동합니다./