linkstate
npm Package | @angular/animations |
---|---|
Module | import { state } from '@angular/animations'; |
Source | animations/src/animation_metadata.ts |
function state(name: string, styles: AnimationStyleMetadata, options?: {
params: {
[name: string]: any;
};
}): AnimationStateMetadata;
linkDescription
state
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.
state
declares an animation state within the given trigger. When a state is active within a
component then its associated styles will persist on the element that the trigger is attached to
(even when the animation ends).
To animate between states, have a look at the animation transition DSL function. To register states to an animation trigger please have a look at the trigger function.
linkThe void
state
The void
state value is a reserved word that angular uses to determine when the element is not
apart of the application anymore (e.g. when an ngIf
evaluates to false then the state of the
associated element is void).
linkThe *
(default) state
The *
state (when styled) is a fallback state that will be used if the state that is being
animated is not declared within the trigger.
linkUsage
state
will declare an animation state with its associated styles
within the given trigger.
stateNameExpr
can be one or more state names separated by commas.styles
refers to the styling data that will be persisted on the element once the state has been reached.
// "void" is a reserved name for a state and is used to represent
// the state in which an element is detached from from the application.
state("void", style({ height: 0 }))
// user-defined states
state("closed", style({ height: 0 }))
state("open, visible", 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 {
}