Installation
npm install --save angular-router-animations
Angular Routing Animations
A collection of Angular 2+ Animations
Exports
Export | Description |
---|---|
moveIn |
Animates element to move and fade in on enter and move and fade out on leave. |
fallIn |
Animates element to fall and fade in on enter and fall and fade out on leave. |
fadeInOut |
Animates element to fade in on enter and fade out on leave. |
growShrink |
Animates element to grow on enter and shrink on leave. |
Usage
Component
import { fallIn, fadeInOut, growShrink } from 'angular-router-animations';
@Component({
selector: 'home-art',
templateUrl: './home.art.component.html',
styleUrls: ['./home.art.component.css'],
animations: [fallIn(), fadeInOut(), growShrink()],
})
Template
<div class="arrow right" *ngIf="indicators" [@fadeInOut] (click)="nextImg()"></div>
<div class="pic-wrapper">
<img class="pic" src="{{activePhoto.url}}" [@growShrink] [@fadeInOut]="imgState" />
</div>