I am trying to create a function that will be triggered at the end of an animation in Angular 2 (I am using the latest angular cli).
I have been on the Angular Animations to gain some understanding of how this would be implemented by assigning the trigger with a callback in my example of code I have a component that is animated onto the page. the code is has follows:
//first.component.ts
import { Component, OnInit } from '@angular/core';
import { trigger, state, style, animate, transition } from '@angular/core';
@Component({
selector: 'app-first',
templateUrl: './first.component.html',
styleUrls: ['./first.component.css'],
host: {
'[@routeAnimation]': 'true',
'[style.display]': "'block'",
'[style.position]': "'absolute'"
},
animations: [
trigger('routeAnimation', [
state('*', style({transform: 'translateX(0)', opacity: 1})),
transition('void => *', [style({transform: 'translateX(-100%)', opacity: 0}),animate(500)]),
transition('* => void', animate(500, style({transform: 'translateX(100%)', opacity: 0})))
])
]
})
export class FirstComponent implements OnInit {
constructor() { }
ngOnInit() {
}
myFunc() {
// call this function at the end of the animation.
}
}
the html is simply a div
<div class="w9914420">
<h2>
first-component Works!
</h2>
</div>
To be honest I am not too familiar with JavaScript so any help or a quick example would help me gain a better understanding of Angular 2.
The easing value controls how the animation accelerates and decelerates during its runtime. Value is one of ease , ease-in , ease-out , ease-in-out , or a cubic-bezier() function call. If not supplied, no easing is applied.
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 .
This is working example:
import {Component, NgModule, Input, trigger, state, animate, transition, style, HostListener } from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
@Component({
selector : 'toggle',
animations: [
trigger('toggle', [
state('true', style({ opacity: 1; color: 'red' })),
state('void', style({ opacity: 0; color: 'blue' })),
transition(':enter', animate('500ms ease-in-out')),
transition(':leave', animate('500ms ease-in-out'))
])
],
template: `
<div class="toggle" [@toggle]="show"
(@toggle.start)="animationStarted($event)"
(@toggle.done)="animationDone($event)"
*ngIf="show">
<ng-content></ng-content>
</div>`
})
export class Toggle {
@Input() show:boolean = true;
@HostListener('document:click')
onClick(){
this.show=!this.show;
}
animationStarted($event) {
console.log('Start');
}
animationDone($event) {
console.log('End');
}
}
@Component({
selector: 'my-app',
template: `
<div>
<toggle>Hey!</toggle>
</div>
`,
})
export class App {
}
@NgModule({
imports: [ BrowserModule ],
declarations: [ App, Toggle ],
bootstrap: [ App ]
})
export class AppModule {}
Plunker
Now Angular2's supported (@animation.start)
and (@animation.done)
to tap into animation events.
For example, you can use (@routeAnimation.start)=onStart($event)
, (@routeAnimation.done)=onDone($event)
in the first.component.html.
You can find out more at here.
Also you can see a simple example with the first.component.ts on Plunker.
Hope this help!
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