animateChild

Description

描述

animateChild 是一个特殊动画函数，被angular作为动画DSL语言的一部分。它通过查询元素在动画序列中执行自己的动画来工作。

angular中，每次一个动画被触发，父动画将始终获得优先权，任何子动画都将被阻止，为了子动画运动，父动画必须查询每一个包含子动画的元素并用animateChild来运行。

下面的示例HTML代码显示了具有将同时执行的动画触发器的父元素和子元素。

<!-- parent-child.component.html -->
<button (click)="exp =! exp">Toggle</button>
<hr>

<div [@parentAnimation]="exp">
  <header>Hello</header>
  <div [@childAnimation]="exp">
      one
  </div>
  <div [@childAnimation]="exp">
      two
  </div>
  <div [@childAnimation]="exp">
      three
  </div>
</div>

当exp的值变为true时，只有parentAnimation 动了，因为它拥有主动权，但是，用query和animateChild 也能运行内部动画

// parent-child.component.ts
import {trigger, transition, animate, style, query, animateChild} from '@angular/animations';
@Component({
  selector: 'parent-child-component',
  animations: [
    trigger('parentAnimation', [
      transition('false => true', [
        query('header', [
          style({ opacity: 0 }),
          animate(500, style({ opacity: 1 }))
        ]),
        query('@childAnimation', [
          animateChild()
        ])
      ])
    ]),
    trigger('childAnimation', [
      transition('false => true', [
        style({ opacity: 0 }),
        animate(500, style({ opacity: 1 }))
      ])
    ])
  ]
})
class ParentChildCmp {
  exp: boolean = false;
}

在上面的动画代码中，当parentAnimation过渡开始时，它首先查询以找到标题元素并将其淡入。然后，它找到包含@childAnimation触发器的每个子元素，然后允许它们的动画触发

下面用stagger进一步扩展

query('@childAnimation', stagger(100, [
  animateChild()
]))

现在每个子动画都是以100ms的步骤开始的。

子动画的第一帧

当使用animateChild执行子动画时，动画引擎将始终在动画序列的开始处立即应用每个子动画的第一帧。这样，在子动画启动之前，父动画不需要在子元素上设置任何初始样式数据

在上面的例子中，childAnimation的false => true转换的第一帧包含不透明度的样式：0.这在parentAnimation动画转换序列开始时立即应用。只有当@childAnimation被查询并用animateChild调用时，它才会动画到它的不透明目标：1。

请注意，此功能旨在与query（）一起使用，它仅适用于使用Angular动画DSL分配的动画（这意味着CSS关键帧和转场不由此API处理）