export group(steps: AnimationMetadata[]) : AnimationGroupMetadata
group 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.
group specifies a list of animation steps that are all run in parallel. Grouped animations
are useful when a series of styles must be animated/closed off
at different statrting/ending times.
The group function can either be used within a sequence or a transition
and it will only continue to the next instruction once all of the inner animation steps
have completed.
Usage
The steps data that is passed into the group animation function can either consist
of style or animate function calls. Each call to style() or
animate()
within a group will be executed instantly (use keyframes or a
animate() with a delay value to offset styles to be applied at a later
time).
group([
animate("1s", { background: "black" }))
animate("2s", { color: "white" }))
])
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 {
}