I've seen many animation tutorials for the entering or leaving elements ("New element" on the image below), but the rest of elements (Element 1 and 2), that are pushed apart usually just teleport to their new location.
Is there a way to animate the other elements to move away nicely, like depicted in the attached image?
The keyframes() function in Angular allows you to specify multiple interim styles within a single transition, with an optional offset to define the point in the animation where each style change should occur.
To create a staggered animation, use multiple Animation objects. One AnimationController controls all of the Animation s. Each Animation object specifies the animation during an Interval .
The ng-repeat directive also adds a ng-move class value when the HTML element changes position. In addition, during the animation, the HTML element will have a set of class values, which will be removed when the animation has finished. Example: the ng-hide directive will add these class values: ng-animate.
You can use angular2 animation API to achieve it.
Plunker Example
@Component({
selector: 'my-app',
template: `
<div class="container">
<div *ngFor="let item of items; let i = index" class="item" (click)="remove(i)"
[@anim]="item.state">
{{ item.name }}
</div>
</div>
<div class="aside">
<button (click)="push()">Push</button>
</div>
`,
animations: [
trigger('anim', [
transition('* => void', [
style({ height: '*', opacity: '1', transform: 'translateX(0)', 'box-shadow': '0 1px 4px 0 rgba(0, 0, 0, 0.3)'}),
sequence([
animate(".25s ease", style({ height: '*', opacity: '.2', transform: 'translateX(20px)', 'box-shadow': 'none' })),
animate(".1s ease", style({ height: '0', opacity: 0, transform: 'translateX(20px)', 'box-shadow': 'none' }))
])
]),
transition('void => active', [
style({ height: '0', opacity: '0', transform: 'translateX(20px)', 'box-shadow': 'none' }),
sequence([
animate(".1s ease", style({ height: '*', opacity: '.2', transform: 'translateX(20px)', 'box-shadow': 'none' })),
animate(".35s ease", style({ height: '*', opacity: 1, transform: 'translateX(0)', 'box-shadow': '0 1px 4px 0 rgba(0, 0, 0, 0.3)' }))
])
])
])
]
})
export class AppComponent {
items: any[] = [
{ name: 'Element 1' },
{ name: 'Element 2' }
];
push() {
this.items.splice(1, 0, { name: 'New element', state: 'active' });
}
remove(index) {
this.items.splice(index, 1);
}
}
Don't forget to import BrowserAnimationsModule
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With