angular2 如何使用animate实现动画效果

首先要在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"
}

转载于:https://www.cnblogs.com/huayuanp/p/8473353.html