Состояние

Experimental Function

Класс Export

export state(stateNameExpr: string, styles: AnimationStyleMetadata) : AnimationStateDeclarationMetadata

state — это функция, специфичная для анимации, предназначенная для использования внутри языка описания анимации Angular2. Если эта информация нова для вас, перейдите на страницу метаданных анимации компонентов component animations metadata page, чтобы лучше понять, как используются анимации в Angular2.

state объявляет состояние анимации внутри заданного триггера. Когда состояние активно в компоненте, его связанные стили сохраняются на элементе, к которому прикреплен триггер (даже после завершения анимации).

Для анимации между состояниями обратитесь к функции языка описания анимации transition. Для регистрации состояний в триггере анимации обратитесь к функции trigger.

Состояние void

Значение состояния void — зарезервированное слово, которое Angular использует для определения того, что элемент больше не является частью приложения (например, когда значение ngIf равно false, состояние связанного элемента становится пустым).

Состояние * (по умолчанию)

Состояние * (при стилизации) — это состояние по умолчанию, которое будет использоваться, если состояние, которое анимируется, не объявлено в триггере.

Использование

state объявляет состояние анимации со связанными стилями внутри заданного триггера.

• stateNameExpr может содержать одно или несколько имён состояний, разделенных запятыми.
• styles относится к данным стилизации, которые будут сохранены на элементе после достижения состояния.

// "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 {Component, NgModule, animate, state, style, transition, trigger} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';

@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: [BrowserModule], declarations: [MyExpandoCmp], bootstrap: [MyExpandoCmp]})
export class AppModule {
}

экспортировано из @angular/core/index, определено в @angular/core/src/animation/metadata.ts