state()

state

Experimental Function

Class Export

export state(name: string, styles: AnimationStyleMetadata) : AnimationStateMetadata

state is an animation-specific function that is designed to be used inside of Angular2's animation DSL language. If this information is new, please navigate to the component animations metadata page to gain a better understanding of how animations in Angular2 are used.

state declares an animation state within the given trigger. When a state is active within a component then its associated styles will persist on the element that the trigger is attached to (even when the animation ends).

To animate between states, have a look at the animation transition DSL function. To register states to an animation trigger please have a look at the trigger function.

The void state

The void state value is a reserved word that angular uses to determine when the element is not apart of the application anymore (e.g. when an ngIf evaluates to false then the state of the associated element is void).

The * (default) state

The * state (when styled) is a fallback state that will be used if the state that is being animated is not declared within the trigger.

Usage

state will declare an animation state with its associated styles within the given trigger.

  • stateNameExpr can be one or more state names separated by commas.
  • styles refers to the styling data that will be persisted on the element once the state has been reached.
// "void" is a reserved name for a state and is used to represent
// the state in which an element is detached from from the application.
state("void", style({ height: 0 }))

// user-defined states
state("closed", style({ height: 0 }))
state("open, visible", style({ height: "*" }))
import {animate, state, style, transition, trigger} from '@angular/animations';
import {Component, NgModule} from '@angular/core';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';

@Component({
  selector: 'example-app',
  styles: [`
    .toggle-container {
      background-color:white;
      border:10px solid black;
      width:200px;
      text-align:center;
      line-height:100px;
      font-size:50px;
      box-sizing:border-box;
      overflow:hidden;
    }
  `],
  animations: [trigger(
      'openClose',
      [
        state('collapsed, void', style({height: '0px', color: 'maroon', borderColor: 'maroon'})),
        state('expanded', style({height: '*', borderColor: 'green', color: 'green'})),
        transition(
            'collapsed <=> expanded', [animate(500, style({height: '250px'})), animate(500)])
      ])],
  template: `
    <button (click)="expand()">Open</button>
    <button (click)="collapse()">Closed</button>
    <hr />
    <div class="toggle-container" [@openClose]="stateExpression">
      Look at this box
    </div>
  `
})
export class MyExpandoCmp {
  stateExpression: string;
  constructor() { this.collapse(); }
  expand() { this.stateExpression = 'expanded'; }
  collapse() { this.stateExpression = 'collapsed'; }
}

@NgModule(
    {imports: [BrowserAnimationsModule], declarations: [MyExpandoCmp], bootstrap: [MyExpandoCmp]})
export class AppModule {
}

exported from animations-index defined in animations/src/animation_metadata.ts

© 2010–2017 Google, Inc.
Licensed under the Creative Commons Attribution License 4.0.
https://angular.io/docs/ts/latest/api/animations/index/state-function.html

在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号

意见反馈
返回顶部