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等特殊选择器。查询页面中有更多特殊选择器。

延迟在Angular 4.x中输入过渡动画

1 个答案: