[Angular2 Animation] Control Undefined Angular 2 States with void State-优快云博客

本文介绍了一个使用Angular框架实现的状态动画示例。通过定义不同的状态如'void'、'go'和'stop'，并为每个状态设置样式，可以创建动态的UI元素。特别是对于初始的'void'状态进行了详细说明，它不匹配任何已定义状态，但作为所有状态的一部分，需要注意其行为以免引起意外情况。此外，还展示了如何通过按钮点击触发状态改变，以及如何在状态间进行过渡动画。

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;
    }
}