16.6 - 查询元素执行动画

Angular 中提供了 query 方法查找元素并为元素创建动画

import { slide } from "./animations"
animations: [
    slide,
    trigger("todoAnimations", [
        transition(":enter", [
            query("h2", [
                style({ transform: "translateY(-30px)" }),
                animate(300)
            ]),
            // 查询子级动画 使其执行
            query("@slide", animateChild())
        ])
    ])
]

<div class="container" @todoAnimations>
    <h2>Todos</h2>
    <ul class="list-group">
        <li
            @slide
            (click)="removeItem(i)"
            *ngFor="let item of todos; let i = index"
            class="list-group-item"
            >
            {{ item }}
        </li>
    </ul>
</div>

• 默认情况下，父级动画和子级动画按照顺序执行，先执行父级动画，再执行子级动画，可以使用 group 方法让其并行

  trigger("todoAnimations", [
    transition(":enter", [
        group([
            query("h2", [
                style({ transform: "translateY(-30px)" }),
                animate(300)
            ]),
            query("@slide", animateChild())
        ])
    ])
  ])