Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/bergben/ng2-page-transition
Simple Angular2 component to create a page transition animation on route changes
https://github.com/bergben/ng2-page-transition
Last synced: 4 months ago
JSON representation
Simple Angular2 component to create a page transition animation on route changes
- Host: GitHub
- URL: https://github.com/bergben/ng2-page-transition
- Owner: bergben
- License: mit
- Archived: true
- Created: 2016-10-31T22:02:54.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2017-05-20T17:03:06.000Z (over 7 years ago)
- Last Synced: 2024-09-18T04:17:42.687Z (4 months ago)
- Language: TypeScript
- Homepage:
- Size: 19.5 KB
- Stars: 41
- Watchers: 4
- Forks: 7
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-angular-components - ng2-page-transition - Simple Angular2 component to create a page transition animation on route changes. (Uncategorized / Uncategorized)
- awesome-angular-components - ng2-page-transition - Simple Angular2 component to create a page transition animation on route changes. (Uncategorized / Uncategorized)
README
[](https://gitter.im/bergben/bergben?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
# ng2-page-transition
Simple Angular2 component to create a page transition animation on route changes.
### Works for Angular 2.x only. Angular 4.2 supports route transitions built in:
https://github.com/angular/angular/blob/master/CHANGELOG.md#420-rc0-2017-05-19
Check out https://github.com/bergben/ng2-page-transition/issues/8 for more info.
## Features
All that this component does is listen for route changes and on NavigationStart it triggers an animation to fade out the current page and fade in the page on the new route.
By default it also scrolls the page to the top on route changes, this can be disabled though.
## Install
```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
### Import the module
```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 {}
```
### Wrap content in your template
```html
Some other content
```
## Options
### scrollTop
By default the component scrolls to top on route changes, you can disable this by setting `[scrollTop]="false"`
```html
Some other content
```
### onlyOnRoutes
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.
### ignoreOnRoutes
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.
### Custom transition
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};
```
In this case the entering animation would be delayed by 500 ms, allowing the leaving animation which takes 500ms to complete.
## To-do
- Provide a demo