refactor(NavController): improve transitions, view stages

This refactor made it so view transitions do no step on one another when a new transition happens
during an active transition.
This commit is contained in:
Adam Bradley
2016-01-19 14:24:49 -06:00
parent 332c761b9e
commit 3213d02375
12 changed files with 1431 additions and 1013 deletions

View File

@@ -554,7 +554,7 @@ export class Animation {
/*
STATIC CLASSES
*/
static create(element, name) {
static create(name) {
let AnimationClass = AnimationRegistry[name];
if (!AnimationClass) {
@@ -562,7 +562,7 @@ export class Animation {
// fallback to just the base Animation class
AnimationClass = Animation;
}
return new AnimationClass(element);
return new AnimationClass();
}
static createTransition(enteringView: ViewController, leavingView: ViewController, opts: any = {}) {

View File

@@ -16,8 +16,8 @@ class IOSTransition extends Animation {
constructor(enteringView, leavingView, opts) {
super(null, opts);
this.duration(DURATION);
this.easing(EASING);
this.duration(opts.duration || DURATION);
this.easing(opts.easing || EASING);
// what direction is the transition going
let backDirection = (opts.direction === 'back');

View File

@@ -24,11 +24,11 @@ class MDTransition extends Animation {
this.add(enteringPage);
if (backDirection) {
this.duration(200).easing('cubic-bezier(0.47,0,0.745,0.715)');
this.duration(opts.duration || 200).easing('cubic-bezier(0.47,0,0.745,0.715)');
enteringPage.fromTo(TRANSLATEY, CENTER, CENTER);
} else {
this.duration(280).easing('cubic-bezier(0.36,0.66,0.04,1)');
this.duration(opts.duration || 280).easing('cubic-bezier(0.36,0.66,0.04,1)');
enteringPage
.fromTo(TRANSLATEY, OFF_BOTTOM, CENTER)
.fadeIn();
@@ -51,7 +51,7 @@ class MDTransition extends Animation {
// setup leaving view
if (leavingView && backDirection) {
// leaving content
this.duration(200).easing('cubic-bezier(0.47,0,0.745,0.715)');
this.duration(opts.duration || 200).easing('cubic-bezier(0.47,0,0.745,0.715)');
let leavingPage = new Animation(leavingView.pageRef());
this.add(leavingPage.fromTo(TRANSLATEY, CENTER, OFF_BOTTOM).fadeOut());
}