W3cubDocs

/Angular 2

sequence

Experimental Function

Class Export

export sequence(steps: AnimationMetadata[]) : AnimationSequenceMetadata

sequence 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.

sequence Specifies a list of animation steps that are run one by one. (sequence is used by default when an array is passed as animation data into transition.)

The sequence function can either be used within a group or a transition and it will only continue to the next instruction once each of the inner animation steps have completed.

To perform animation styling in parallel with other animation steps then have a look at the group animation function.

Usage

The steps data that is passed into the sequence animation function can either consist of style or animate function calls. A call to style() will apply the provided styling data immediately while a call to animate() will apply its styling data over a given time depending on its timing data.

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

Example (live demo)

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 {
}

exported from @angular/core/index defined in @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