remove css animations

This commit is contained in:
Adam Bradley
2015-05-05 15:48:22 -05:00
parent 7f1d5444e6
commit f935bedd64
4 changed files with 27 additions and 109 deletions

View File

@ -69,6 +69,12 @@ html {
height: 100vh; height: 100vh;
} }
.nav-item {
// by default .nav-item is hidden
// and the transition animation will display it
display: none;
}
.nav-item, .nav-item,
.nav-item-child { .nav-item-child {
// user created view, contained by .nav-item // user created view, contained by .nav-item

View File

@ -47,7 +47,7 @@ export class NavBase {
} }
} }
getActiveItem() { getActive() {
for (let i = 0, ii = this.navItems.length; i < ii; i++) { for (let i = 0, ii = this.navItems.length; i < ii; i++) {
if (this.navItems[i].state === ACTIVE_STATE) { if (this.navItems[i].state === ACTIVE_STATE) {
return this.navItems[i]; return this.navItems[i];
@ -56,6 +56,13 @@ export class NavBase {
return null; return null;
} }
getPrevious(item) {
if (item) {
return this._stack[ this._stack.indexOf(item) - 1 ];
}
return null;
}
getStagedEnteringItem() { getStagedEnteringItem() {
for (let i = 0, ii = this.navItems.length; i < ii; i++) { for (let i = 0, ii = this.navItems.length; i < ii; i++) {
if (this.navItems[i].state === STAGED_ENTERING_STATE) { if (this.navItems[i].state === STAGED_ENTERING_STATE) {
@ -97,7 +104,7 @@ export class NavBase {
} }
// the active item is going to be the leaving one (if one exists) // the active item is going to be the leaving one (if one exists)
let leavingItem = this.getActiveItem() || {}; let leavingItem = this.getActive() || {};
// create a new NavStackItem // create a new NavStackItem
let enteringItem = new NavStackItem(Class, params); let enteringItem = new NavStackItem(Class, params);
@ -111,7 +118,6 @@ export class NavBase {
// start the transition // start the transition
this.transition(enteringItem, leavingItem, opts).then(() => { this.transition(enteringItem, leavingItem, opts).then(() => {
console.log('push completed');
resolve(); resolve();
}); });
@ -133,12 +139,11 @@ export class NavBase {
// get the active item and set that it is staged to be leaving // get the active item and set that it is staged to be leaving
// was probably the one popped from the stack // was probably the one popped from the stack
let leavingItem = this.getActiveItem() || {}; let leavingItem = this.getActive() || {};
// start the transition // start the transition
this.transition(enteringItem, leavingItem, opts).then(() => { this.transition(enteringItem, leavingItem, opts).then(() => {
// transition completed, destroy the leaving item // transition completed, destroy the leaving item
console.log('pop completed');
this._destroy(leavingItem); this._destroy(leavingItem);
resolve(); resolve();
}); });
@ -190,6 +195,8 @@ export class NavBase {
// allow clicks again // allow clicks again
ClickBlock(false); ClickBlock(false);
console.log('transition, canSwipeBack()', this.canSwipeBack());
// resolve that this push has completed // resolve that this push has completed
resolve(); resolve();
}); });
@ -248,23 +255,24 @@ export class NavBase {
util.array.remove(this.navItems, navItem); util.array.remove(this.navItems, navItem);
} }
getPrevious(item) {
return this._stack[ this._stack.indexOf(item) - 1 ];
}
getToolbars(pos: String) { getToolbars(pos: String) {
let last = this.last(); let last = this.last();
return last && last.navItem && last.navItem._toolbars[pos] || []; return last && last.navItem && last.navItem._toolbars[pos] || [];
} }
canSwipeBack() {
return !!this.getPrevious(this.getActive());
}
} }
class NavStackItem { class NavStackItem {
constructor(ComponentClass, params = {}) { constructor(ComponentClass, params = {}) {
this.Class = ComponentClass; this.Class = ComponentClass;
this.params = params; this.params = params;
this._setupPromise = new Promise((resolve) => { this._setupPromise = new Promise((resolve) => {
this._resolveSetupPromise = resolve; this._resolveSetup = resolve;
}); });
} }
@ -273,64 +281,9 @@ class NavStackItem {
} }
finishSetup(navItem, componentInstance) { finishSetup(navItem, componentInstance) {
this.navItem = navItem this.navItem = navItem;
this.instance = componentInstance this.instance = componentInstance;
this._resolveSetupPromise() this._resolveSetup();
}
setAnimation(state) {
if (!state) {
this.navItem.domElement.removeAttribute('animate')
this.navItem.domElement.classList.remove('start')
} else {
this.navItem.domElement.setAttribute('animate', state)
}
}
setShown(isShown) {
this.navItem.domElement.classList[isShown?'add':'remove']('shown')
}
startAnimation() {
this.navItem.domElement.classList.add('start')
}
_animate({ isShown, animation }) {
this.setAnimation(animation)
this.setShown(isShown)
if (animation) {
// We have to wait two rafs for the element to show. Yawn.
return util.dom.rafPromise().then(util.dom.rafPromise).then(() => {
this.startAnimation()
return util.dom.transitionEndPromise(this.navItem.domElement).then(() => {
this.setAnimation(null)
})
})
} else {
return Promise.resolve()
}
}
enterReverse(opts) {
return this.enter( util.extend({reverse: true}, opts) )
}
enter({ reverse = false, animate = false } = {}) {
return this._animate({
isShown: true,
animation: animate ? (reverse ? 'enter-reverse' : 'enter') : null
})
}
leave({ reverse = false, animate = false } = {}) {
return this._animate({
isShown: false,
animation: animate ? (reverse ? 'leave-reverse' : 'leave') : null
})
}
leaveReverse(opts) {
return this.leave( util.extend({reverse: true}, opts) )
} }
} }

View File

@ -1,40 +0,0 @@
$transition-duration: 500ms;
.nav-item {
display: none;
&.shown {
display: block;
}
&[animate] {
display: block;
transition: $transition-duration linear;
}
&[animate=enter] {
transform: translate3d(100%,0,0);
&.start {
transform: translate3d(0,0,0);
}
}
&[animate=enter-reverse] {
transform: translate3d(-100%,0,0);
&.start {
transform: translate3d(0,0,0);
}
}
&[animate=leave-reverse] {
transform: translate3d(0,0,0);
&.start {
transform: translate3d(-100%,0,0);
}
}
&[animate=leave] {
transform: translate3d(0,0,0);
&.start {
transform: translate3d(100%,0,0);
}
}
}

View File

@ -41,7 +41,6 @@
"components/layout/layout", "components/layout/layout",
"components/list/list", "components/list/list",
"components/modal/modal", "components/modal/modal",
"components/nav/nav-item",
"components/radio/radio", "components/radio/radio",
"components/search-bar/search-bar", "components/search-bar/search-bar",
"components/switch/switch", "components/switch/switch",