This is an adaptation of the Animate.css animations using the @angular/animations library.
- Install
ngx-animations
:
npm install ngx-animations
Or
yarn add ngx-animations
- Import the
BrowserAnimationsModule
andNgxAnimationsModule
in your module :
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgxAnimationsModule } from 'ngx-animations';
...
@NgModule({
imports: [ BrowserAnimationsModule, NgxAnimationsModule ],
...
})
<div (click)="myDiv.animate()">
<div #myDiv="animated" [animAted]="{time: 800, animation: 'flip'}"></div>
</div>
Running example on stackblitz using @ngx-starter-kit/ngx-utils
InViewportDirective
Use the *animIf
directive to set the start and end animation :
<div
*animIf="show; info: { startAnim: 'bounceIn', endAnim: 'bounceOut', time: 1000 }"
></div>
Then in your component :
Import the desired animation and the AnimationsService :
import { fadeIn, AnimationsService } from 'ngx-animations';
Get your element using the @ViewChild
annotation :
@ViewChild('element') element: ElementRef;
Inject the AnimationsService
:
constructor(private animationsService: AnimationsService) {}
After that you can create the player :
const player = this.animationsService.create(
fadeIn(300),
this.element.nativeElement
);
And play the animation :
player.play();
bounce flash pulse rubberBand shake swing tada wobble jello bounceIn bounceInDown bounceInLeft bounceInRight bounceInUp bounceOut bounceOutDown bounceOutLeft bounceOutRight bounceOutUp fadeIn fadeInDown fadeInDownBig fadeInLeft fadeInLeftBig fadeInRight fadeInRightBig fadeInUp fadeInUpBig fadeOut fadeOutDown fadeOutDownBig fadeOutLeft fadeOutLeftBig fadeOutRight fadeOutRightBig fadeOutUp fadeOutUpBig flip flipInX flipInY flipOutX flipOutY lightSpeedIn lightSpeedOut rotateIn rotateInDownLeft rotateInDownRight rotateInUpLeft rotateInUpRight rotateOut rotateOutDownLeft rotateOutDownRight rotateOutUpLeft rotateOutUpRight slideInUp slideInDown slideInLeft slideInRight slideOutUp slideOutDown slideOutLeft slideOutRight zoomIn zoomInDown zoomInLeft zoomInRight zoomInUp zoomOut zoomOutDown zoomOutLeft zoomOutRight zoomOutUp hinge jackInTheBox rollIn rollOut