16.8 - 自定义状态动画

Angular 提供了 state 方法用于定义状态

默认代码解析

<div class="container">
    <div class="panel panel-default">
        <div class="panel-heading" (click)="toggle()">
            一套框架, 多种平台, 移动端 & 桌面端
        </div>
        <div class="panel-body">
            <p>
                使用简单的声明式模板，快速实现各种特性。使用自定义组件和大量现有组件，扩展模板语言。在几乎所有的
                IDE 中获得针对 Angular
                的即时帮助和反馈。所有这一切，都是为了帮助你编写漂亮的应用，而不是绞尽脑汁的让代码“能用”。
            </p>
            <p>
                从原型到全球部署，Angular 都能带给你支撑 Google
                大型应用的那些高延展性基础设施与技术。
            </p>
            <p>
                通过 Web Worker 和服务端渲染，达到在如今(以及未来）的 Web
                平台上所能达到的最高速度。 Angular 让你有效掌控可伸缩性。基于
                RxJS、Immutable.js 和其它推送模型，能适应海量数据需求。
            </p>
            <p>
                学会用 Angular
                构建应用，然后把这些代码和能力复用在多种多种不同平台的应用上 ——
                Web、移动 Web、移动应用、原生应用和桌面原生应用。
            </p>
        </div>
    </div>
</div>
<style>
    .container {
        margin-top: 100px;
    }
    .panel-heading {
        cursor: pointer;
    }
</style>

mport { Component } from "@angular/core"
@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    styles: []
})
export class AppComponent {
    isExpended: boolean = false
    toggle() {
        this.isExpended = !this.isExpended
    }
}

创建动画

trigger("expandCollapse", [
    // 使用 state 方法定义折叠状态元素对应的样式
    state(
        "collapsed",
        style({
            height: 0,
            overflow: "hidden",
            paddingTop: 0,
            paddingBottom: 0
        })
    ),
    // 使用 state 方法定义展开状态元素对应的样式
    state("expanded", style({ height: "*", overflow: "auto" })),
    // 定义展开动画
    transition("collapsed => expanded", animate("400ms ease-out")),
    // 定义折叠动画
    transition("expanded => collapsed", animate("400ms ease-in"))
])

<div class="panel-body" [@expandCollapse]="isExpended ? 'expanded' : 'collapsed'"></div>