sequence

function experimental

npm Package	@angular/animations
Module	import { sequence } from '@angular/animations';
Source	animations/src/animation_metadata.ts

function sequence(steps: AnimationMetadata[], options: AnimationOptions | null = null): AnimationSequenceMetadata;

Description

sequence is an animation-specific function that is designed to be used inside of Angular'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 Angular 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 }))
])

import {animate, state, style, transition, trigger} from '@angular/animations';
import {Component, NgModule} from '@angular/core';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';

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