последовательность

Experimental Function

Класс Export

export sequence(steps: AnimationMetadata[]) : AnimationSequenceMetadata

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

sequence Определяет список шагов анимации, которые выполняются один за другим. (sequence используется по умолчанию, когда массив передаётся как данные анимации в transition.)

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

Чтобы выполнить стилизацию анимации параллельно с другими шагами анимации, воспользуйтесь функцией анимации группы.

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

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

sequence([
  style({ opacity: 0 })),
  animate("1s", { opacity: 1 }))
])

Пример (демо-версия)

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/sequence-function.html