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>
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 {
}