{"id":13481547,"url":"https://github.com/bergben/ng2-page-transition","last_synced_at":"2025-09-30T03:31:22.477Z","repository":{"id":65424521,"uuid":"72481705","full_name":"bergben/ng2-page-transition","owner":"bergben","description":"Simple Angular2 component to create a page transition animation on route changes","archived":true,"fork":false,"pushed_at":"2017-05-20T17:03:06.000Z","size":20,"stargazers_count":41,"open_issues_count":0,"forks_count":7,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-01-12T14:43:52.578Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bergben.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-10-31T22:02:54.000Z","updated_at":"2023-09-04T19:04:42.000Z","dependencies_parsed_at":"2023-01-23T01:55:10.729Z","dependency_job_id":null,"html_url":"https://github.com/bergben/ng2-page-transition","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bergben%2Fng2-page-transition","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bergben%2Fng2-page-transition/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bergben%2Fng2-page-transition/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bergben%2Fng2-page-transition/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bergben","download_url":"https://codeload.github.com/bergben/ng2-page-transition/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":234695770,"owners_count":18873032,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-07-31T17:00:52.695Z","updated_at":"2025-09-30T03:31:17.211Z","avatar_url":"https://github.com/bergben.png","language":"TypeScript","funding_links":[],"categories":["Awesome Angular [![Awesome TipeIO](https://img.shields.io/badge/Awesome%20Angular-@TipeIO-6C6AE7.svg)](https://github.com/gdi2290/awesome-angular) [![Awesome devarchy.com](https://img.shields.io/badge/Awesome%20Angular-@devarchy.com-86BDC1.svg)](https://github.com/brillout/awesome-angular-components)","Uncategorized"],"sub_categories":["Angular \u003ca id=\"angular\"\u003e\u003c/a\u003e","Uncategorized"],"readme":"[![Join the chat at https://gitter.im/bergben/bergben](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/bergben/bergben?utm_source=badge\u0026utm_medium=badge\u0026utm_campaign=pr-badge\u0026utm_content=badge)\n\n# ng2-page-transition\nSimple Angular2 component to create a page transition animation on route changes.\n\n### Works for Angular 2.x only. Angular 4.2 supports route transitions built in: \nhttps://github.com/angular/angular/blob/master/CHANGELOG.md#420-rc0-2017-05-19\n\nCheck out https://github.com/bergben/ng2-page-transition/issues/8 for more info.\n\n\n\n## Features\nAll 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. \nBy default it also scrolls the page to the top on route changes, this can be disabled though.\n\n## Install\n```bash\n$ npm install ng2-page-transition --save\n```\nAdd web-animations-js if you haven't done so already to support all browsers (see https://angular.io/docs/ts/latest/guide/animations.html) \n\n```bash\n$ npm install web-animations-js --save\n```\n\n## Usage\n### Import the module\n```TypeScript\n// app.module.ts\nimport {NgModule} from '@angular/core';\nimport { RouterModule } from '@angular/router'; //Router is required for the component to work\nimport {BrowserModule} from '@angular/platform-browser';\nimport { Ng2PageTransitionModule } from \"ng2-page-transition\"; // \u003c-- import the module\nimport {MyComponent} from './my.component';\n\n@NgModule({\n    imports: [BrowserModule,\n              RouterModule.forRoot() //Router is required\n              Ng2PageTransitionModule // \u003c-- include it in your app module\n             ],\n    declarations: [MyComponent],  \n    bootstrap: [MyComponent]\n})\nexport class MyAppModule {}\n```\n\n### Wrap content in your template\n```html\n\u003c!-- my.component.html --\u003e\n\u003cng2-page-transition\u003e\n    \u003crouter-outlet\u003e\u003c/router-outlet\u003e\n    Some other content\n\u003c/ng2-page-transition\u003e\n```\n\n## Options\n### scrollTop\nBy default the component scrolls to top on route changes, you can disable this by setting `[scrollTop]=\"false\"`\n```html\n\u003c!-- my.component.html --\u003e\n\u003cng2-page-transition [scrollTop]=\"false\"\u003e\n    \u003crouter-outlet\u003e\u003c/router-outlet\u003e\n    Some other content\n\u003c/ng2-page-transition\u003e\n```\n### onlyOnRoutes\nBy 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:  \n```html\n\u003c!-- my.component.html --\u003e\n\u003cng2-page-transition [onlyOnRoutes]=\"['blog']\"\u003e\n    \u003crouter-outlet\u003e\u003c/router-outlet\u003e\n    Some other content\n\u003c/ng2-page-transition\u003e\n```\nonlyOnRoutes takes an array of strings, in the example above the transition would only happen on any route containing \"blog\" in the url.\n\n### ignoreOnRoutes\nBy default the transition will take place on any route change. You can deactivate the transition for routes that contain one or more certain strings:  \n```html\n\u003c!-- my.component.html --\u003e\n\u003cng2-page-transition [ignoreOnRoutes]=\"['blog']\"\u003e\n    \u003crouter-outlet\u003e\u003c/router-outlet\u003e\n    Some other content\n\u003c/ng2-page-transition\u003e\n```\nignoreOnRoutes takes an array of strings, in the example above the transition wouldn't be triggered on any route containing \"blog\" in the url.\n\n### Custom transition\nIf you want a different animation than the default fade out and in then you can do that like so:\n```html\n\u003c!-- my.component.html --\u003e\n\u003cng2-page-transition [animation]=\"customAnimation\"\u003e\n    \u003cdiv [@ng2ElementState]=\"customAnimation.state\"\u003e\n        Some other content\n    \u003c/div\u003e\n\u003c/ng2-page-transition\u003e\n```\n```TypeScript\n //my.component.ts\n [...]\n import { customTransition } from './custom-transition.animation';\n\n@Component({\n  selector: 'my-component', \n  [...]\n  animations: [customTransition()],\n})\nexport class MyComponent {\n  customAnimation:any = {custom:true, state:\"\"};\n}\n```\n\n```TypeScript\n //custom-transition.animation.ts\nimport {trigger, state, animate, style, transition, AnimationEntryMetadata} from '@angular/core';\n\nexport function customTransition():AnimationEntryMetadata {\n  return slideOutAndIn();\n}\n\nfunction slideOutAndIn():AnimationEntryMetadata {\n  return trigger('ng2ElementState', [\n    state('leave', style({\n        position:'fixed', \n        width:'100%'\n    })),\n    state('enter', style({\n        position:'fixed', \n        width:'100%'\n    })),\n    transition('* =\u003e enter', [\n        style({transform: 'translateX(100%)'}),\n        animate('0.5s ease-in-out', style({transform: 'translateX(0%)'}))\n    ]),\n    transition('* =\u003e leave', [\n      style({transform: 'translateX(0%)'}),\n      animate('0.5s ease-in-out', style({transform: 'translateX(-100%)'}))\n    ]),\n  ]);\n}\n```\n`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)\n\n#### enterDelay\nYou can wait for the leaving animation to complete:\n```TypeScript\n //my.component.ts\n [...]\n  customAnimation:any = {custom:true, state:\"\", enterDelay: 500};\n```\nIn this case the entering animation would be delayed by 500 ms, allowing the leaving animation which takes 500ms to complete.\n\n\n## To-do\n - Provide a demo\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbergben%2Fng2-page-transition","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbergben%2Fng2-page-transition","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbergben%2Fng2-page-transition/lists"}