export style(tokens: {[key: string]: string | number} |
Array<{[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.
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 })
*)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 {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 {
}
exported from animations/index defined in animations/src/animation_metadata.ts
© 2010–2017 Google, Inc.
Licensed under the Creative Commons Attribution License 4.0.
https://angular.io/docs/ts/latest/api/animations/index/style-function.html