Simple Angular2 component that creates a page transition animation on route changes
npm install ng2-page-transition
bash
$ npm install ng2-page-transition --save
`
Add web-animations-js if you haven't done so already to support all browsers (see https://angular.io/docs/ts/latest/guide/animations.html)
`bash
$ npm install web-animations-js --save
`
Usage
$3
`TypeScript
// app.module.ts
import {NgModule} from '@angular/core';
import { RouterModule } from '@angular/router'; //Router is required for the component to work
import {BrowserModule} from '@angular/platform-browser';
import { Ng2PageTransitionModule } from "ng2-page-transition"; // <-- import the module
import {MyComponent} from './my.component';
@NgModule({
imports: [BrowserModule,
RouterModule.forRoot() //Router is required
Ng2PageTransitionModule // <-- include it in your app module
],
declarations: [MyComponent],
bootstrap: [MyComponent]
})
export class MyAppModule {}
`
$3
`html
Some other content
`
Options
$3
By default the component scrolls to top on route changes, you can disable this by setting [scrollTop]="false"
`html
Some other content
`
$3
By default the transition will take place on any route change. You can activate the transition only on routes that contain one or more certain strings:
`html
Some other content
`
onlyOnRoutes takes an array of strings, in the example above the transition would only happen on any route containing "blog" in the url.
$3
By default the transition will take place on any route change. You can deactivate the transition for routes that contain one or more certain strings:
`html
Some other content
`
ignoreOnRoutes takes an array of strings, in the example above the transition wouldn't be triggered on any route containing "blog" in the url.
$3
If you want a different animation than the default fade out and in then you can do that like so:
`html
Some other content
`
`TypeScript
//my.component.ts
[...]
import { customTransition } from './custom-transition.animation';
@Component({
selector: 'my-component',
[...]
animations: [customTransition()],
})
export class MyComponent {
customAnimation:any = {custom:true, state:""};
}
`
`TypeScript
//custom-transition.animation.ts
import {trigger, state, animate, style, transition, AnimationEntryMetadata} from '@angular/core';
export function customTransition():AnimationEntryMetadata {
return slideOutAndIn();
}
function slideOutAndIn():AnimationEntryMetadata {
return trigger('ng2ElementState', [
state('leave', style({
position:'fixed',
width:'100%'
})),
state('enter', style({
position:'fixed',
width:'100%'
})),
transition('* => enter', [
style({transform: 'translateX(100%)'}),
animate('0.5s ease-in-out', style({transform: 'translateX(0%)'}))
]),
transition('* => leave', [
style({transform: 'translateX(0%)'}),
animate('0.5s ease-in-out', style({transform: 'translateX(-100%)'}))
]),
]);
}
`
customAnimation.state has three possible states: "enter", "leave" and "out". "out" is set on the router event NavigationEnd (see https://github.com/bergben/ng2-page-transition/blob/master/src/ng2-page-transition.component.ts#L36)
#### enterDelay
You can wait for the leaving animation to complete:
`TypeScript
//my.component.ts
[...]
customAnimation:any = {custom:true, state:"", enterDelay: 500};
``