Class Export
export trigger(name: string, animation: AnimationMetadata[]) : AnimationEntryMetadata
trigger
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.
trigger
Creates an animation trigger which will a list of state and transition entries that will be evaluated when the expression bound to the trigger changes.
Triggers are registered within the component annotation data under the animations section. An animation trigger can be placed on an element within a template by referencing the name of the trigger followed by the expression value that the trigger is bound to (in the form of [@triggerName]="expression"
.
Usage
trigger
will create an animation trigger reference based on the provided name
value. The provided animation
value is expected to be an array consisting of state and transition declarations.
@Component({ selector: 'my-component', templateUrl: 'my-component-tpl.html', animations: [ trigger("myAnimationTrigger", [ state(...), state(...), transition(...), transition(...) ]) ] }) class MyComponent { myStatusExp = "something"; }
The template associated with this component will make use of the myAnimationTrigger
animation trigger by binding to an element within its template code.
<!-- somewhere inside of my-component-tpl.html --> <div [@myAnimationTrigger]="myStatusExp">...</div>
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.