列表中有延迟的Angular 5动画

Question

我想将旋转动画添加到图像列表中，但我做不到。我可以做一个全局旋转，但我想用延迟来补偿这些动画。触发器list制作了很好的动画，但仅在开始时。当更新组件数据时，该列表也会随之更新。

谢谢。

component.ts

@Component({
  selector: 'app-totem',
  templateUrl: './totem.component.html',
  styleUrls: ['./totem.component.scss'],
  animations: [
    trigger('totem', [
      transition('* => *', [
        query(':self',
          stagger('70ms', [
            style({ transform: 'rotateY(-180deg)' }),
            animate('800ms ease-in-out')
          ])
        )
      ])
    ]),
    trigger('list', [
      transition('* => *', [
        query('.totem',
          stagger('70ms', [
            style({ transform: 'rotateY(-180deg)' }),
            animate('800ms ease-in-out')
          ])
        )
      ])
    ])
  ]
})

Component.html

<div class="totems" #totems [@list]="items.length">
  <div class="totem" *ngFor=" let item of items" @totem>
    <div class="front" [style.background-image]="'url(' + item.front.url + ')'"></div>
    <div class="back" [style.background-image]="'url(' + item.back.url + ')'"></div>
  </div>
</div>

Answer 1

你已经很接近了。在创建触发器@totem时，您是正确的

但是你的动画应该是

trigger('totem', [
  transition(':enter', [
    query('*', [
      style({ transform: 'rotateY(-180deg)' }),
      stagger(70, [
        animate('800ms ease-in-out', style('*'))
      ]), { delay: 200 }
    ])
])

如YearofMoo New Wave of Animation Features中所示

他们有一个专门介绍ngFor的部分。关键点是:enter是当ngFor呈现时ngFor想要的东西，它做动画，如果你过滤ngFor，它将总是用新的项目进入":enter“状态。(你也可以做一个:离开动画)。

另外，如果你想在你的动画行后面加一个延迟，它的{ delay : 200 }