export keyframes(steps: AnimationStyleMetadata[]) : AnimationKeyframesSequenceMetadata
keyframes 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.
keyframes specifies a collection of style entries each optionally characterized
by an offset value.
Usage
The keyframes animation function is designed to be used alongside the animate
animation function. Instead of applying animations from where they are
currently to their destination, keyframes can describe how each style entry is applied
and at what point within the animation arc (much like CSS Keyframe Animations do).
For each style() entry an offset value can be set. Doing so allows to specifiy at
what percentage of the animate time the styles will be applied.
// the provided offset values describe when each backgroundColor value is applied.
animate("5s", keyframes([
style({ backgroundColor: "red", offset: 0 }),
style({ backgroundColor: "blue", offset: 0.2 }),
style({ backgroundColor: "orange", offset: 0.3 }),
style({ backgroundColor: "black", offset: 1 })
]))
Alternatively, if there are no offset values used within the style entries then the offsets
will
be calculated automatically.
animate("5s", keyframes([
style({ backgroundColor: "red" }) // offset = 0
style({ backgroundColor: "blue" }) // offset = 0.33
style({ backgroundColor: "orange" }) // offset = 0.66
style({ backgroundColor: "black" }) // offset = 1
]))
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 {
}