group

function experimental

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

function group(steps: AnimationMetadata[], options: AnimationOptions | null = null): AnimationGroupMetadata;

Description

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

group specifies a list of animation steps that are all run in parallel. Grouped animations are useful when a series of styles must be animated/closed off at different starting/ending times.

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

Usage

The steps data that is passed into the group animation function can either consist of style or animate function calls. Each call to style() or animate() within a group will be executed instantly (use keyframes or a animate() with a delay value to offset styles to be applied at a later time).

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

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