Class Export
export style(tokens: string | {[key: string]: string | number} | Array<string|{[key: string]: string | number}>) : AnimationStyleMetadata
style
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.
style
declares a key/value object containing CSS properties/styles that can then be used for animation states, within an animation sequence, or as styling data for both animate and keyframes.
Usage
style
takes in a key/value string map as data and expects one or more CSS property/value pairs to be defined.
// string values are used for css properties style({ background: "red", color: "blue" }) // numerical (pixel) values are also supported style({ width: 100, height: 0 })
Auto-styles (using *
)
When an asterix (*
) character is used as a value then it will be detected from the element being animated and applied as animation data when the animation starts.
This feature proves useful for a state depending on layout and/or environment factors; in such cases the styles are calculated just before the animation starts.
// the steps below will animate from 0 to the // actual height of the element style({ height: 0 }), animate("1s", style({ height: "*" }))
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.