16.2 - 快速上手

在使用动画功能之前，需要引入动画模块，即 BrowserAnimationsModule

import { BrowserAnimationsModule } from "@angular/platform-browser/animations"
@NgModule({
    imports: [BrowserAnimationsModule],
})
export class AppModule {}

默认代码解析，todo 之删除任务和添加任务

<!-- 在 index.html 文件中引入 bootstrap.min.css -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" />

<div class="container">
    <h2>Todos</h2>
    <div class="form-group">
        <input (keyup.enter)="addItem(input)" #input type="text" class="form-control" placeholder="add todos" />
    </div>
    <ul class="list-group">
        <li (click)="removeItem(i)" *ngFor="let item of todos; let i = index" class="list-group-item">
            {{ item }}
        </li>
    </ul>
</div>

import { Component } from "@angular/core"
@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    styles: []
})
export class AppComponent {
    // todo 列表
    todos: string[] = ["Learn Angular", "Learn RxJS", "Learn NgRx"]
    // 添加 todo
    addItem(input: HTMLInputElement) {
        this.todos.push(input.value)
        input.value = ""
    }
    // 删除 todo
    removeItem(index: number) {
        this.todos.splice(index, 1)
    }
}

创建动画

• trigger 方法用于创建动画，指定动画名称
• transition 方法用于指定动画的运动状态，出场动画或者入场动画，或者自定义状态动画。
• style 方法用于设置元素在不同的状态下所对应的样式

• animate 方法用于设置运动参数，比如动画运动时间，延迟事件，运动形式

  @Component({
    animations: [
        // 创建动画, 动画名称为 slide
        trigger("slide", [
            // 指定入场动画 注意: 字符串两边不能有空格, 箭头两边可以有也可以没有空格
            // void => * 可以替换为 :enter
            transition("void => *", [
                // 指定元素未入场前的样式
                style({ opacity: 0, transform: "translateY(40px)" }),
                // 指定元素入场后的样式及运动参数
                animate(250, style({ opacity: 1, transform: "translateY(0)" }))
            ]),
            // 指定出场动画
            // * => void 可以替换为 :leave
            transition("* => void", [
                // 指定元素出场后的样式和运动参数
                animate(600, style({ opacity: 0, transform: "translateX(100%)" }))
            ])
        ])
    ]
  })

  <li @slide></li>

• 注意：入场动画中可以不指定元素的默认状态，Angular 会将 void 状态清空作为默认状态

  trigger("slide", [
    transition(":enter", [
        style({ opacity: 0, transform: "translateY(40px)" }),
        animate(250)
    ]),
    transition(":leave", [
        animate(600, style({ opacity: 0, transform: "translateX(100%)" }))
    ])
  ])

  注意：要设置动画的运动参数，需要将 animate 方法的一个参数更改为字符串类型

  // 动画执行总时间 延迟时间 (可选) 运动形式 (可选)
  animate("600ms 1s ease-out", style({ opacity: 0, transform: "translateX(100%)" }))