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

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相关推荐

MFC上显示GIF图片（使用 GIF Animation Control控件）
昨晚到现在一直寻思着在MFC的Dialog上显示个GIF图片,无奈如此的有难度,经过寻找找到个好用的控件,拿来用了,但是官网给的不是很好使.也缺乏一个文件,我这里一起整理出来了.说个过程 1:一共需要 ...
GameMaker Studio 之中的攻击与受击判定盒
什么是hitboxes和hurtboxes? 注:这里我还是用原文,原意是攻击判定盒 & 受击判定盒,如果你常玩FTG.ACT或者FPS类型的游戏,对hitbox这玩意儿肯定了解很多.不了解的 ...
Unity Manual阅读记录——Animation(version 2019.4)
Animation简介 Unity提供的动画系统的主要功能: retargetable animations:重定向动画 full control of animation weights at ru ...
Jerry的碎碎念：SAPUI5, Angular, React和Vue
2019独角兽企业重金招聘Python工程师标准>>> 去年我去一个国内客户现场时,曾经和他们IT部门的一位架构师聊到关于在SAP平台上进行UI应用的二次开发时,UI框架是选用UI5 ...
angular 动画_如何在Angular 6中使用动画
angular 动画介绍 (Introduction) Animation is defined as the transition from an initial state to a final ...
angular面试题及答案_关于最流行的Angular问题的StackOverflow上的48个答案
angular面试题及答案 by Shlomi Levi 通过Shlomi Levi 关于最流行的Angular问题的StackOverflow上的48个答案 (48 answers on Stack ...
angular jit and aot
为什么需要编译 Angular应用中包含的组件.HTML模板(比如:@Directive.@Component.@NgModule.@Pipe)很多都是JS VM无法解析的,所以在浏览器渲染应用之前, ...
Angular2 入门教程
一. 入门 1.初识Angular2 硬知识:Angular2与Angular的区别 (1)依赖加载:Angular1是依赖前置,angular2是按需加载 (2)数据绑定: Angular1 在启动 ...
Angular2.0快速开始
目前Angular2.0开发者预览版已经发布,和Angular1.x相比,发生了很多颠覆性的变化,随后Angular2团队在官网上给出了一个5分钟快速开始的教程,用于编写一个hello world级别 ...
基于Angular创建后台数据模拟（译）
我们已经习惯用AngularJS来创建前后端分离的应用,同时为了便于开发也会通过在前端代码库中使用mock数据来模拟服务端的接口.使用mock数据具有以下诸多的好处: * 如果你并不是接口api的开发 ...

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

[Angular2 Animation] Control Undefined Angular 2 States with void State相关推荐

最新文章

热门文章