[Angular2 Animation] Control Undefined Angular 2 States with void State
2016-10-28 17:37
274 查看
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; } }
相关文章推荐
- [Angular] Two ways to create Angular Animation, using animation() or using state()
- [Angular-Scaled Web] 6. Navigating between states with ui-router
- - (void)reloadRowsAtIndexPaths:(NSArray *)indexPaths withRowAnimation:(UITableViewRowAnimation)anima
- [Angular 2] Managing State in RxJS with StartWith and Scan
- Access-Control-Allow-Origin: Dealing with CORS Errors in Angular
- - (void)deleteRowsAtIndexPaths:(NSArray<NSIndexPath *> *)indexPaths withRowAnimation:(UITableViewRowAnimation)animation;删除报错问题
- [AngularFire] Angular File Uploads to Firebase Storage with Angular control value accessor
- Near-optimal Character Animation with Continuous Control
- Developing ASP.NET Custom Control With C# Builder
- Developing ASP.NET Custom Control With C# Builder
- 关于Animation State could not be played的问题
- How to group Option Button (Form control) with cell link.
- Advanced SQL Server Monitor with Performance Graph, Analysis and Version Control
- Learning Web Development with Bootstrap and AngularJS.pdf( Bootstrap 和 AngularJS 协同开发电子书免费下载)
- CABasicAnimation animationWithKeyPath 一些规定的值
- [Angular] Dynamic components with ComponentFactoryResolver
- Extend Dynamic TextBox Control View State To Store
- UserControl with GridView rowCommand not fired
- 【ionic+angularjs】angularjs ui-router路由简介($urlRouter、$state、$stateProvider、ui-sref....)
- 学习ROS_urdf/Tutorials/Using urdf with robot_state_publisher 时遇到的问题