首页 > 其他 > 详细

[Angular2 Animation] Control Undefined Angular 2 States with void State

时间:2016-10-28 17:41:33      阅读:144      评论:0      收藏:0      [点我收藏+]

Each trigger starts with an “undefined” state or a “void” state which doesn’t match any of your currently defined states. You have to be aware of when you’re in that state so that you don’t stumble on any undesired behaviors. This is especially important if your transitions cover “*”/all states because “void” is part of “all”.

 

import {Component, trigger, state, style, transition, animate} from "@angular/core";
@Component({
    selector: app,
    animations:[
        trigger(signal, [
            state(void, style({
                transform:translateY(-100%)
            })),
            state(go, style({
                background-color:green,
                height:100px
            })),
            state(stop, style({
                background-color:red,
                height:50px
            })),
            transition(* => *, animate(500))
        ])
    ],
    styles:[`
.traffic-light{
    width: 100px;
    height: 100px;
    background-color: black;
}
`],
    template: `
<div
    [@signal]="signal"
    class="traffic-light"
    *ngIf="isHere"
    >
    
</div>
<button (click)="onGoClick()">Go</button>
<button (click)="onStopClick()">Stop</button>
<hr>
<button (click)="onToggleClick()">Toggle</button>
`
})
export class AppComponent {
    signal;
    isHere = false;

    onGoClick(){
        this.signal = go;
    }

    onStopClick(){
        this.signal = stop;
    }

    onToggleClick(){
        this.isHere = !this.isHere;
    }
}

 

[Angular2 Animation] Control Undefined Angular 2 States with void State

原文:http://www.cnblogs.com/Answer1215/p/6008757.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!