style

Experimental Function

Класс Export

export style(tokens: string | {[key: string]: string | number} |
    Array<string|{[key: string]: string | number}>) : AnimationStyleMetadata

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

style объявляет объект ключ/значение, содержащий свойства/стили CSS, которые затем могут использоваться для состояний анимации внутри последовательности анимации или в качестве данных стилей для animate и keyframes.

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

style принимает в качестве данных карту строковых пар ключ/значение и ожидает определения одной или нескольких пар свойств/значений CSS.

// string values are used for css properties
style({ background: "red", color: "blue" })

// numerical (pixel) values are also supported
style({ width: 100, height: 0 })

Автостили (используя *)

Когда используется символ звёздочки (*) в качестве значения, он будет определяться по элементу, который анимируется, и применяться в качестве данных анимации при запуске анимации.

Эта функция полезна для состояний, зависящих от макета и/или факторов среды; в таких случаях стили вычисляются непосредственно перед началом анимации.

// the steps below will animate from 0 to the
// actual height of the element
style({ height: 0 }),
animate("1s", 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