UNPKG

ng2-page-transition

Version:

Simple Angular2 component that creates a page transition animation on route changes

1 lines 3.63 kB
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("@angular/core"),require("@angular/router")):"function"==typeof define&&define.amd?define(["exports","@angular/core","@angular/router"],e):e(t["ng2-page-transition"]=t["ng2-page-transition"]||{},t.ng.core,t.ng.router)}(this,function(t,e,n){"use strict";function o(){return i()}function i(){return e.trigger("ng2ElementState",[e.state("leave",e.style({opacity:.3})),e.state("out",e.style({opacity:0})),e.state("enter",e.style({opacity:1})),e.transition("* => enter",e.animate("0.5s ease-in")),e.transition("* => leave",e.animate("0.2s ease-out")),e.transition("* => out",e.animate("0ms"))])}var r=function(t,e,n,o){var i,r=arguments.length,a=r<3?e:null===o?o=Object.getOwnPropertyDescriptor(e,n):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(t,e,n,o);else for(var s=t.length-1;s>=0;s--)(i=t[s])&&(a=(r<3?i(a):r>3?i(e,n,a):i(e,n))||a);return r>3&&a&&Object.defineProperty(e,n,a),a},a=function(t,e){return function(n,o){e(n,o,t)}};t.Ng2PageTransitionComponent=function(){function t(t){var e=this;this.router=t,this.scrollTop=!0,this.onlyOnRoutes=[""],this.ignoreOnRoutes=[""],this.animation={state:"leave",custom:!1,enterDelay:0},this.animation.state="leave",t.events.subscribe(function(t){return e.routerSubscription(t)})}return t.prototype.routerSubscription=function(t){var e=this;this.shouldTriggerForRoute(t.url)&&(t instanceof n.NavigationStart?(this.animation.state="leave",this.delayPromise=new Promise(function(t,n){window.setTimeout(function(){t(!0)},e.animation.enterDelay)})):(t instanceof n.NavigationEnd||t instanceof n.NavigationCancel)&&(void 0!==this.delayPromise?this.delayPromise.then(function(){e.animation.state="out",e.scrollTop&&window.scrollTo(0,0),setTimeout(function(){e.animation.state="enter"},0)}):(this.animation.state="out",this.scrollTop&&window.scrollTo(0,0),setTimeout(function(){e.animation.state="enter"},0))))},t.prototype.shouldTriggerForRoute=function(t){return this.passesOnlyOnRoutes(t)&&this.passesIgnoreOnRoutes(t)},t.prototype.passesOnlyOnRoutes=function(t){if(!t)return!1;for(var e=0;e<this.onlyOnRoutes.length;e++)if(t.indexOf(this.onlyOnRoutes[e])>-1)return!0;return!1},t.prototype.passesIgnoreOnRoutes=function(t){if(!t)return!1;var e=this.ignoreOnRoutes.filter(function(e){return t.indexOf(e)>-1});return!(e.length&&e.length>0)},t}(),r([e.Input()],t.Ng2PageTransitionComponent.prototype,"scrollTop",void 0),r([e.Input()],t.Ng2PageTransitionComponent.prototype,"onlyOnRoutes",void 0),r([e.Input()],t.Ng2PageTransitionComponent.prototype,"ignoreOnRoutes",void 0),r([e.Input()],t.Ng2PageTransitionComponent.prototype,"animation",void 0),t.Ng2PageTransitionComponent=r([e.Component({selector:"ng2-page-transition",template:'<div [@ng2ElementState]="animation.custom || animation.state"><ng-content></ng-content></div>',animations:[o()]}),a(0,e.Inject(e.forwardRef(function(){return n.Router})))],t.Ng2PageTransitionComponent);var s=function(t,e,n,o){var i,r=arguments.length,a=r<3?e:null===o?o=Object.getOwnPropertyDescriptor(e,n):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(t,e,n,o);else for(var s=t.length-1;s>=0;s--)(i=t[s])&&(a=(r<3?i(a):r>3?i(e,n,a):i(e,n))||a);return r>3&&a&&Object.defineProperty(e,n,a),a};t.Ng2PageTransitionModule=function(){function t(){}return t}(),t.Ng2PageTransitionModule=s([e.NgModule({declarations:[t.Ng2PageTransitionComponent],exports:[t.Ng2PageTransitionComponent]})],t.Ng2PageTransitionModule),t.defaultPageTransition=o,t.fadeOutAndIn=i,Object.defineProperty(t,"__esModule",{value:!0})});