feat(angular): animation is explicit

This commit is contained in:
Manu Mtz.-Almeida
2018-04-16 21:01:33 +02:00
parent c1cbbc52d2
commit 099b3edda3
3 changed files with 82 additions and 53 deletions

View File

@ -140,8 +140,8 @@ export class IonRouterOutlet implements OnDestroy, OnInit {
enteringView = this.stackCtrl.createView(this.activated, activatedRoute);
}
const direction = this.navCtrl.consumeDirection();
await this.stackCtrl.setActive(enteringView, direction);
const {direction, animated} = this.navCtrl.consumeTransition();
await this.stackCtrl.setActive(enteringView, direction, animated);
this.activateEvents.emit(this.activated.instance);
emitEvent(this.elementRef.nativeElement);

View File

@ -35,12 +35,10 @@ export class StackController {
return this.views.length > deep;
}
async setActive(enteringView: RouteView, direction: number | undefined) {
async setActive(enteringView: RouteView, direction: number, animated: boolean) {
const leavingView = this.getActive();
const forcedGoBack = direction === -1;
const reused = this.insertView(enteringView, forcedGoBack);
direction = direction != null ? direction : (reused ? -1 : 1);
await this.transition(enteringView, leavingView, direction, this.canGoBack(1));
this.insertView(enteringView, direction);
await this.transition(enteringView, leavingView, direction, animated, this.canGoBack(1));
this.cleanup();
}
@ -50,23 +48,29 @@ export class StackController {
this.navCtrl.goBack(view.url);
}
private insertView(enteringView: RouteView, forcedGoBack: boolean): boolean {
if (this.stack) {
const index = this.views.indexOf(enteringView);
if (index >= 0) {
this.views = this.views.slice(0, index + 1);
return true;
} else {
if (forcedGoBack) {
this.views = [enteringView];
} else {
this.views.push(enteringView);
}
return false;
}
} else {
private insertView(enteringView: RouteView, direction: number) {
// no stack
if (!this.stack) {
this.views = [enteringView];
return false;
return;
}
// stack setRoot
if (direction === 0) {
this.views = [enteringView];
return;
}
// stack
const index = this.views.indexOf(enteringView);
if (index >= 0) {
this.views = this.views.slice(0, index + 1);
} else {
if (direction === 1) {
this.views.push(enteringView);
} else {
this.views = [enteringView];
}
}
}
@ -85,7 +89,13 @@ export class StackController {
return this.views.length > 0 ? this.views[this.views.length - 1] : null;
}
private async transition(enteringView: RouteView, leavingView: RouteView, direction: number, showGoBack: boolean) {
private async transition(
enteringView: RouteView,
leavingView: RouteView,
direction: number,
animated: boolean,
showGoBack: boolean
) {
const enteringEl = enteringView ? enteringView.element : undefined;
const leavingEl = leavingView ? leavingView.element : undefined;
const containerEl = this.containerEl;
@ -95,8 +105,8 @@ export class StackController {
await containerEl.componentOnReady();
await containerEl.commit(enteringEl, leavingEl, {
duration: direction === 0 ? 0 : undefined,
direction: direction === -1 ? NavDirection.Back : NavDirection.Forward,
duration: !animated ? 0 : undefined,
direction: direction === 1 ? NavDirection.Forward : NavDirection.Back,
deepWait: true,
showGoBack
});

View File

@ -11,56 +11,75 @@ export const enum NavIntent {
@Injectable()
export class NavController {
private direction = 0;
private intent: NavIntent = NavIntent.Auto;
private animated = true;
private stack: string[] = [];
constructor(
@Optional() private router?: Router
) {}
goForward(url: string | UrlTree, extras?: NavigationExtras) {
this.intent = NavIntent.Forward;
goForward(url: string | UrlTree, animated?: boolean, extras?: NavigationExtras) {
this.setIntent(NavIntent.Forward, animated);
return this.router.navigateByUrl(url, extras);
}
goBack(url: string | UrlTree, extras?: NavigationExtras) {
this.intent = NavIntent.Back;
goBack(url: string | UrlTree, animated?: boolean, extras?: NavigationExtras) {
this.setIntent(NavIntent.Back, animated);
return this.router.navigateByUrl(url, extras);
}
goRoot(url: string | UrlTree, extras?: NavigationExtras) {
this.intent = NavIntent.Root;
goRoot(url: string | UrlTree, animated?: boolean, extras?: NavigationExtras) {
this.setIntent(NavIntent.Root, animated);
return this.router.navigateByUrl(url, extras);
}
setIntent(intent: NavIntent) {
setIntent(intent: NavIntent, animated?: boolean) {
this.intent = intent;
this.animated = (animated === undefined)
? intent !== NavIntent.Root
: animated;
}
consumeDirection() {
if (this.direction === 0) {
const index = this.stack.indexOf(document.location.href);
if (index === -1) {
this.stack.push(document.location.href);
this.direction = 1;
} else if (index < this.stack.length - 1) {
this.stack = this.stack.slice(0, index + 1);
this.direction = -1;
}
consumeTransition() {
const guessDirection = this.guessDirection();
let direction = 0;
let animated = false;
if (this.intent === NavIntent.Auto) {
direction = guessDirection;
animated = direction !== 0;
} else {
animated = this.animated;
direction = intentToDirection(this.intent);
}
const direction = directionForIntent(this.intent, this.direction);
this.intent = NavIntent.Auto;
this.direction = 0;
return direction;
this.animated = true;
return {
direction,
animated
};
}
private guessDirection() {
const index = this.stack.indexOf(document.location.href);
if (index === -1) {
this.stack.push(document.location.href);
return 1;
} else if (index < this.stack.length - 1) {
this.stack = this.stack.slice(0, index + 1);
return -1;
}
return 0;
}
}
function directionForIntent(intent: NavIntent, nav: number): number {
if (intent === NavIntent.Auto) {
return nav;
function intentToDirection(intent: NavIntent): number {
switch (intent) {
case NavIntent.Forward: return 1;
case NavIntent.Back: return -1;
default: return 0;
}
return intent === NavIntent.Back ? -1 : 1;
}