Question

采取以下案例：我有一个使用* ngFor循环创建的项目列表。我希望他们使用动画一个接一个地顺序出现（与所有这些作为一个对立）

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
  <ul class="nav nav-tabs profile-nav">
    <li class="nav-item">
      <a class="nav-link active" href="#">Active</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link disabled" href="#">Disabled</a>
    </li>
  </ul>
</div>

但是当我创建动画时，（使用每个div的主要状态的void状态），它们都从相同的初始/最终状态继承。因此，它们将全部显示为一个而不是顺序。

<div *ngFor="let item of items" [@flyInOut]="'in'">

我希望能够使用animation delay来指定延迟这个延迟是用ngFor循环指定的，但我没有运气使其工作。因为我只有一个有限数量的实例，我想到了硬编码触发器（例如构建flyInOut1，flyInOut1，...）但这实际上是一个不好的做法。

有更好的解决方案吗？

Answer 1

好的，错误的动画现在支持Angular 4，并且是新的＆＃34;查询的一部分＆＃34;功能

transition('* => *', [ // each time the binding value changes
    query(':leave', [
      stagger(100, [
        animate('0.5s', style({ opacity: 0 }))
      ])
    ]),
    query(':enter', [
      style({ opacity: 0 }),
      stagger(100, [
        animate('0.5s', style({ opacity: 1 }))
      ])
    ])
  ])

Official documentation

Nice tutorial here

角度2动画：每个元素过渡时间

1 个答案: