group

Experimental Function

Class Export

export group(steps: AnimationMetadata[]) : AnimationGroupMetadata

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

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 statrting/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" }))
])

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