Angular 复杂序列

前提条件

对下列概念有基本的理解：

• Angular 动画简介
• 转场与触发器

到目前为止，我们已经学过了单个 HTML 元素的简单动画。Angular 还允许你在进入和离开页面时播放 "动画协调序列"，比如当整个网格或元素列表进入或离开页面时，多个条目的动画之间需要彼此协调时间。你可以选择并行执行多个动画，或者按顺序逐个运行离散动画。

用来控制复杂动画序列的函数如下：

query() 函数

大多数复杂动画都依赖 ​query()​ 函数来查找子元素并对其应用动画，基本的例子是：

query() 的第一个参数是一个 css 选择器字符串，它还可以包含以下 Angular 特定的标记：

进入和离开元素
并非所有子元素都会实际上被认为是进入/离开；有时，这可能是违反直觉和令人困惑的。
你还可以在 Querying 选项卡下的动画实时示例（在动画介绍部分）中看到这方面的插图。

使用 query() 和 stagger()（交错）函数执行多元素动画

通过 ​query()​ 查询子元素后，​stagger()​ 函数允许你定义每个查询的动画项之间的时间间隙，从而为元素之间延迟设置动画。

下面的例子演示了如何使用 ​query()​ 和 ​stagger()​ 函数对依次添加的英雄列表从上到下播放动画（有少许延迟）。

• 用 ​query()​ 查阅正在进入或离开页面的任意元素。该查询会找出那些符合某种匹配 CSS 选择器的元素
• 对每个元素，使用 ​style()​ 为其设置初始样式。使其变得透明，并使用 ​transform ​将其移出位置，以便它能滑入后就位。
• 使用 ​stagger()​ 来在每个动画之间延迟 30 毫秒
• 对屏幕上的每个元素，根据一条自定义缓动曲线播放 0.5 秒的动画，同时将其淡入，而且逐步取消以前的位移效果

animations: [
  trigger('pageAnimations', [
    transition(':enter', [
      query('.hero', [
        style({opacity: 0, transform: 'translateY(-100px)'}),
        stagger(30, [
          animate('500ms cubic-bezier(0.35, 0, 0.25, 1)',
          style({ opacity: 1, transform: 'none' }))
        ])
      ])
    ])
  ]),

使用 group() 函数播放并行动画

你已经了解了如何在两个连续的动画之间添加延迟。不过你可能还想配置一些并行的动画。比如，你可能希望为同一个元素的两个 CSS 属性设置动画，但要为每个属性使用不同的 ​easing ​函数。这时，你可以使用动画函数 ​group()​。

注意：
​group()​函数用于对动画步骤进行分组，而不是针对动画元素。

在下面的例子中，对 ​:enter​ 和 ​:leave​ 使用分组，可以配置两种不同的时序。它们会同时作用于同一个元素，但彼此独立运行。

animations: [
  trigger('flyInOut', [
    state('in', style({
      width: '*',
      transform: 'translateX(0)', opacity: 1
    })),
    transition(':enter', [
      style({ width: 10, transform: 'translateX(50px)', opacity: 0 }),
      group([
        animate('0.3s 0.1s ease', style({
          transform: 'translateX(0)',
          width: '*'
        })),
        animate('0.3s ease', style({
          opacity: 1
        }))
      ])
    ]),
    transition(':leave', [
      group([
        animate('0.3s ease', style({
          transform: 'translateX(50px)',
          width: 10
        })),
        animate('0.3s 0.2s ease', style({
          opacity: 0
        }))
      ])
    ])
  ])
]

顺序动画与平行动画

复杂动画中可以同时发生很多事情。但是当你要创建一个需要让几个子动画逐个执行的动画时，该怎么办呢？以前我们使用 ​group()​ 来同时并行运行多个动画。

第二个名叫 ​sequence()​ 的函数会让你一个接一个地运行这些动画。在 ​sequence()​ 中，这些动画步骤由 ​style()​ 或 ​animate()​ 的函数调用组成。

• ​style()​ 用来立即应用所指定的样式数据。
• ​animate()​ 用来在一定的时间间隔内应用样式数据。

过滤器动画范例

来看看范例应用中的另一个动画。在 Filter/Stagger 页，往 Search Heroes 文本框中输入一些文本，比如 ​Magnet ​或 ​tornado​。

过滤器会在你输入时实时工作。每当你键入一个新字母时，就会有一些元素离开页面，并且过滤条件也会逐渐变得更加严格。相反，当你删除过滤器中的每个字母时，英雄列表也会逐渐重新进入页面中。

HTML 模板中包含一个名叫 ​filterAnimation ​的触发器。

<label for="search">Search heroes: </label>
<input type="text" id="search" #criteria
       (input)="updateCriteria(criteria.value)"
       placeholder="Search heroes">

<ul class="heroes" [@filterAnimation]="heroesTotal">
  <li *ngFor="let hero of heroes" class="hero">
    <div class="inner">
      <span class="badge">{{ hero.id }}</span>
      <span class="name">{{ hero.name }}</span>
    </div>
  </li>
</ul>

该组件装饰器中的 ​filterAnimation ​包含三个转场。

@Component({
  animations: [
    trigger('filterAnimation', [
      transition(':enter, * => 0, * => -1', []),
      transition(':increment', [
        query(':enter', [
          style({ opacity: 0, width: 0 }),
          stagger(50, [
            animate('300ms ease-out', style({ opacity: 1, width: '*' })),
          ]),
        ], { optional: true })
      ]),
      transition(':decrement', [
        query(':leave', [
          stagger(50, [
            animate('300ms ease-out', style({ opacity: 0, width: 0 })),
          ]),
        ])
      ]),
    ]),
  ]
})
export class HeroListPageComponent implements OnInit {
  heroesTotal = -1;

  get heroes() { return this._heroes; }
  private _heroes: Hero[] = [];

  ngOnInit() {
    this._heroes = HEROES;
  }

  updateCriteria(criteria: string) {
    criteria = criteria ? criteria.trim() : '';

    this._heroes = HEROES.filter(hero => hero.name.toLowerCase().includes(criteria.toLowerCase()));
    const newTotal = this.heroes.length;

    if (this.heroesTotal !== newTotal) {
      this.heroesTotal = newTotal;
    } else if (!criteria) {
      this.heroesTotal = -1;
    }
  }
}

这个例子中的代码包含下列任务：

• 当用户首次打开或导航到此页面时，跳过所有动画（该动画会压扁已经存在的内容，因此它只会作用于那些已经存在于 DOM 中的元素）
• 根据搜索框中的值过滤英雄

对于每次匹配：

• 通过将元素的不透明度和宽度设置为 0 来隐藏正在离开 DOM 的元素
• 对正在进入 DOM 的元素，播放一个 300 毫秒的动画。在动画期间，该元素采用其默认宽度和不透明度。
• 如果有多个匹配的元素正在进入或离开 DOM，则从页面顶部的元素开始对每个元素进行交错（stagger），每个元素之间的延迟为 50 毫秒

在重新排序列表的条目时设置动画

尽管 Angular 开箱即用的支持 ​*ngFor​ 列表项动画，但如果只是它们的顺序变化了，就无法支持。因为 Angular 会忘记哪个元素是哪个元素，从而导致这些动画被破坏。帮助 Angular 跟踪此类元素的唯一方法是将 ​TrackByFunction ​分配给 ​NgForOf ​指令。这可确保 Angular 始终知道哪个元素是哪个，从而允许它始终将正确的动画应用于正确的元素。

重要：
如果你需要为 ​*ngFor​ 列表的条目设置动画，并且此类条目的顺序有可能在运行时更改，请始终使用 ​TrackByFunction​。

动画序列总结

Angular 中这些用于多元素动画的函数，都要从 ​query()​ 开始，查找出内部元素，比如找出某个 ​<div>​ 中的所有图片。其余函数 ​stagger()​、​group()​ 和 ​sequence()​ 会以级联方式或你的自定义逻辑来控制要如何应用多个动画步骤。