首先要在Component裏引入對應的組件：

immport { trigger, state, style, animate, transition } from "@angular/animations";

然後就可以在你@Component註入器寫你的animation代碼：

@Component({
    selector: "hero",
    templateUrl: "./hero.html",
    styleUrls: ["./hero.scss"],
    encapsulation: ViewEncapsulation.None,
    animations: [
        trigger("signal",[
            state("hide", style({
                "height": 0,
                 "background-color": "green"
            })),
            state("show": style({
                "height": "100px",
                "background-color": "yellow"
            })),
            transition("*=>*",animate(500))
        ])
    ]    
})
 

聲明signal

export class hero {
    public signal: string;
}

html的結構

<div [@signal]="signal"></div>
<button (click)="hide()">hide</button>
<button (click)="show()">show</button>

最後在創建hide、show方法觸發就可以了

hide() {
    this.signal = "hide"
}

show() {
    this.signal = "show"
}
 

angular2 如何使用animate實現動畫效果