Группа

Experimental Function

Класс Export

export group(steps: AnimationMetadata[]) : AnimationGroupMetadata

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

group определяет список шагов анимации, которые выполняются параллельно. Группированные анимации полезны, когда ряд стилей должен быть анимирован/закрыт в разные моменты начала/окончания.

Функция group может использоваться как внутри последовательности, так и перехода, и она перейдёт к следующей инструкции только после завершения всех внутренних шагов анимации.

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

Данные steps , передаваемые в функцию анимации group, могут состоять из вызовов функций style или animate. Каждый вызов style() или animate() внутри группы будет выполнен мгновенно (используйте keyframes или animate() с значением задержки, чтобы сместить применение стилей на более поздний момент).

group([
  animate("1s", { background: "black" }))
  animate("2s", { color: "white" }))
])

Пример (демонстрация)

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

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