mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-19 03:32:21 +08:00
remove css animations
This commit is contained in:
@ -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
|
||||||
|
@ -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) )
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
@ -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);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
@ -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",
|
||||||
|
Reference in New Issue
Block a user