linkstyle
npm Package | @angular/animations |
---|---|
Module | import { style } from '@angular/animations'; |
Source | animations/src/animation_metadata.ts |
function style(tokens: '*' | {
[key: string]: string | number;
} | Array<'*' | {
[key: string]: string | number;
}>): AnimationStyleMetadata;
linkDescription
style
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.
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.
linkUsage
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 })
linkAuto-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 {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 {
}