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的部分。关键点是：输入是ngFor想要的那种方式，当ngFor呈现时，它会动画，如果你过滤了ngFor，它将始终点击＆＃34;：输入＆＃34;陈述新物品。（你也可以这样做：留下动画）。

此外，如果你想在你的动画线

之后加上延迟，{延迟：200}

带有延迟的列表上的Angular 5动画

1 个答案: