标签：war color rom start states button current top desire
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
标签：war color rom start states button current top desire
原文地址：http://www.cnblogs.com/Answer1215/p/6008757.html
