Experimental Function
Class Export
export animate(timing: string | number, styles?: AnimationStyleMetadata | AnimationKeyframesSequenceMetadata) : AnimationAnimateMetadata
animate
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.
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 toduration delay easing
(therefore a value such as1s 100ms ease-out
will be parse itself intoduration=1000, delay=100, easing=ease-out
. If a numeric value is provided then that will be used as theduration
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" })) ])
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
Please login to continue.