延遲角4.x的

Question

進入過渡動畫我已經應用動畫上<tr *ngFor='let something of Something' [@rowAnimate]> ...</tr>

這裏是我的代碼以動畫行

animations: [ 
    trigger("rowAnimate", [ 
     transition("void=>*", [ 
      animate("500ms ease-in-out", keyframes([ 
       style({ transform: 'translateX(+200%)'}), 
       style({ transform: 'translateX(+150%)'}), 
       style({ transform: 'translateX(+100%)'}), 
       style({ transform: 'translateX(+50%)'}), 
       style({ transform: 'translateX(0%)'}) 
      ])) 
     ]), 
     transition("*=>void", [ 
      animate("2000ms ease-in-out", style({ left: 100, opacity: 0.0, })) 
     ]) 

    ]) 
] 

其工作但不一樣的，我想。我想要的是延遲每一行動畫一段時間（即第一行1動畫開始，然後第二行等）。

我不想動畫的每一行

Answer 1

使用query和stagger同時運行。也把動漫觸發器表上，這樣你就可以在查詢中選擇行：如果添加/刪除動態中的行查詢

trigger("slide", [ 
    transition("* => slideIn", [ 
    // First hide the rows 
    query('.row ', style({ opacity: 0, transform: "translateY(-40px)" })), 
    // Then slide in one by one using stagger. Here first timing parameter i.e. 100ms is the delay you seek 
    query('.row', stagger('100ms', 
     animate('500ms', keyframes([ 
     style({opacity: 0, transform: 'translateY(-40px)', offset: 0}), 
     style({opacity: 0.25, transform: 'translateY(-25px)', offset: 0.25}), 
     style({opacity: 0.5, transform: 'translateY(-5px)', offset: 0.5}), 
     style({opacity: 0.75, transform: 'translateY(5px)', offset: 0.75}), 
     style({opacity: 1, transform: 'translateY(0)', offset: 1.0}) 
     ])) 
    )) 
    ]) 
]) 

使用特殊選擇像:enter或:leave。查詢頁面中更多特殊的選擇器。