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: "*" }))
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 {
}