Angular Router Animations
ngx-router-animations is a collection of awesome, reusable router animations. Inspired by tympanus.net (thanks to Pedro Botelho) and implements those animations but with Angular Animation Package.
Note: the library requires Angular 4.2+, which introduced different new animation APIs needed by
ngx-router-animations
.
DEMO
Animations Showcase or StackBlitzDemo
Install
npm install ngx-router-animations --save
Load BrowserAnimationsModule which is needed by Angular Animations
@NgModule({
imports: [
...
BrowserAnimationsModule
]
})
Note If you want to support for IE/Edge or Safari install web-animations-js polyfill.
Usage
1 ) Name your routers which you want to animate by passing data to them. ( EG: state)
const routes: Routes = [
{ path: '', redirectTo: 'home', pathMatch: 'full' },
{ path: 'home', component: HomeComponent, data: {state: 'home'} },
{ path: 'about', component: AboutComponent, data: {state: 'about'}},
{ path: 'contact', component: ContactComponent, data: {state: 'contact'} },
{ path: 'follow', component: FollowComponent, data: {state: 'follow'} },
];
2 ) Choose your favorite animation from Animations Showcase
3 ) Import your animation from the package:
import {trigger, transition, useAnimation} from "@angular/animations";
import {rotateCubeToLeft} from "ngx-router-animations";
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ],
animations: [
trigger('rotateCubeToLeft', [ transition('home => about', useAnimation(rotateCubeToLeft))])
]
})
export class AppComponent {
getState(outlet) {
return outlet.activatedRouteData.state;
}
}
Note: As you see this example is to animate from Home To About page. If you want to animate any page you can try * => * transition. The purpose of getState function will be explained next.
4 ) In template
<div
class="router-wrapper"
[@rotateCubeToLeft]="getState(o)"
>
<router-outlet #o="outlet"> </router-outlet>
</div>
Note: We provide state to animation by getState function that gets name of curent route which is the name we just provided in routing .
5 ) In order to have correct animation your router-wrapper should have fixed (width, height) and below styles: (width and height can be customized)
.router-wrapper {
position: relative;
overflow: hidden;
width: 100vw;
height: calc(100% - 47px);
perspective: 1200px;
transform-style: preserve-3d;
}
In addition your components should also have defined width and height. The reason is to keep animation smooth since when navigating the content of that component is removed by router. Example: in home and about components.scss
:host {
display: block;
position: absolute;
width: 100%;
height: 100%;
background: #60d7a9;
}
Still in Doubt ? Check minimalistic demo
Here is a unified version of the above. Instead of adding css to each and every component rendered by the router, I use css selector to select and apply the styles. I removed overflow: hidden
because I find it unnecessary .
/*
this class should wrap router outlet for transition animation
this is required for router animation to work properly
*/
div.router-wrapper {
position: relative;
width: 100%;
height: 100%;
perspective: 1200px;
transform-style: preserve-3d;
}
/*
this should select all components that is placed after <router-outlet>
in a <div> with router-wrapper class
this is required for router animations to work properly
this assumes that components that is rendered by angular RouterOutlet is placed under
<router-outlet> tag (just in case angular changes it in the future)
*/
div.router-wrapper router-outlet ~ * {
display: block;
position: absolute;
width: 100%;
height: 100%;
}
Parameters
You can also provide your custom animation parameters such as duration and delay of animations. Supported params: ( enterTiming, leaveTiming, enterDelay, leaveDelay). Example with params:
animations: [
trigger('rotateCubeToLeft', [ transition('* => *', useAnimation(rotateCubeToLeft,{
params: {enterTiming: '1', leaveTiming: '1', enterDelay: '0.2', leaveDelay: '0.2'}
}
))])
]
Note: Since in some cases params are not directly related, checkout at default params table so you can adjust timings according to them.
Default parameters table
Animation | enterTiming | leaveTiming | enterdelay | leaveDelay |
---|---|---|---|---|
Move | 0.6 | 0.6 | 0 | 0 |
Fade | 0.6 | 0.7 | 0 | 0 |
Scale | 0.6 | 0.7 | 0 | 0 |
Easing | 0.6 | 0.6 | 0 | 0 |
Slide | 1 | 1 | 0 | 0 |
Rotate / Glue | 0.6 | 0.8 | 0.2 | 0 |
Rotate / Flip | 0.5 | 0.5 | 0 | 0 |
Rotate / Room | 0.8 | 0.8 | 0 | 0 |
Rotate / Cube | 0.6 | 0.6 | 0 | 0 |
Rotate / Carousel | 0.8 | 0.8 | 0 | 0 |
Rotate / Sides | 0.5 | 0.5 | 0.2 | 0 |
Contribution
You can fork project from github. Pull requests are kindly accepted. 💡 Checkout my other library: ngx-awesome-uploader .