animateChild

前端之家收集整理的这篇文章主要介绍了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',[
        style({ opacity: 0 }),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处理)

原文链接:https://www.f2er.com/angularjs/145044.html

猜你在找的Angularjs相关文章