animate

function experimental

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

function animate(timings: string | number, styles: AnimationStyleMetadata | AnimationKeyframesSequenceMetadata | null = null): AnimationAnimateMetadata;

Description

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

animate specifies an animation step that will apply the provided styles data for a given amount of time based on the provided timing expression value. Calls to animate are expected to be used within an animation sequence, group, or transition.

Usage

The animate function accepts two input parameters: timing and styles:

• timing is a string based value that can be a combination of a duration with optional delay and easing values. The format for the expression breaks down to duration delay easing (therefore a value such as 1s 100ms ease-out will be parse itself into duration=1000, delay=100, easing=ease-out. If a numeric value is provided then that will be used as the duration value in millisecond form.
• styles is the style input data which can either be a call to style or keyframes. If left empty then the styles from the destination state will be collected and used (this is useful when describing an animation step that will complete an animation by animating to the final state).

// various functions for specifying timing data
animate(500, style(...))
animate("1s", style(...))
animate("100ms 0.5s", style(...))
animate("5s ease", style(...))
animate("5s 10ms cubic-bezier(.17,.67,.88,.1)", style(...))

// either style() of keyframes() can be used
animate(500, style({ background: "red" }))
animate(500, keyframes([
  style({ background: "blue" })),
  style({ background: "red" }))
])

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