mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-16 18:17:31 +08:00
feat(angular): animation is explicit
This commit is contained in:
@ -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);
|
||||
|
@ -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
|
||||
});
|
||||
|
@ -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;
|
||||
}
|
||||
|
Reference in New Issue
Block a user