anim at routes
This commit is contained in:
Matias Alejo Garcia
parent
13cdc0dc46
commit
5cf8db2378
13 changed files with 107 additions and 208 deletions
|
|
@ -406,141 +406,34 @@ to prevent collapsing during animation*/
|
|||
right: 0;
|
||||
|
||||
animation-timing-function: ease-in-out;
|
||||
animation-duration: 0.4s;
|
||||
animation-duration: .4s;
|
||||
animation-iteration-count: 1;
|
||||
animation-fill-mode: both;
|
||||
|
||||
-webkit-animation-timing-function: ease-in-out;
|
||||
-webkit-animation-duration: 0.4s;
|
||||
-webkit-animation-duration: .4s;
|
||||
-webkit-animation-iteration-count: 1;
|
||||
-webkit-animation-fill-mode: both;
|
||||
}
|
||||
|
||||
@-webkit-keyframes CslideInUp {
|
||||
0% {
|
||||
-webkit-transform: translate3d(0, 100%, 0);
|
||||
transform: translate3d(0, 100%, 0);
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes CslideInUp {
|
||||
0% {
|
||||
-webkit-transform: translate3d(0, 100%, 0);
|
||||
transform: translate3d(0, 100%, 0);
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.CslideInUp {
|
||||
-webkit-animation-name: CslideInUp;
|
||||
animation-name: CslideInUp;
|
||||
-webkit-animation-name: slideInUp;
|
||||
animation-name: slideInUp;
|
||||
z-index: 1003;
|
||||
}
|
||||
|
||||
@-webkit-keyframes CslideOutDown {
|
||||
0% {
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: translate3d(0, 100%, 0);
|
||||
transform: translate3d(0, 100%, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes CslideOutDown {
|
||||
0% {
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: translate3d(0, 100%, 0);
|
||||
transform: translate3d(0, 100%, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.CslideOutDown {
|
||||
-webkit-animation-name: CslideOutDown;
|
||||
animation-name: CslideOutDown;
|
||||
-webkit-animation-name: slideOutDown;
|
||||
animation-name: slideOutDown;
|
||||
z-index: 1003;
|
||||
}
|
||||
|
||||
@-webkit-keyframes CslideInLeft {
|
||||
0% {
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: translate3d(100%, 0, 0);
|
||||
transform: translate3d(100%, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes CslideInLeft {
|
||||
0% {
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: translate3d(100%,0, 0);
|
||||
transform: translate3d(100%,0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.CslideInLeft {
|
||||
-webkit-animation-name: CslideInLeft;
|
||||
animation-name: CslideInLeft;
|
||||
.CslideOutRight {
|
||||
-webkit-animation-name: slideOutRight;
|
||||
animation-name: slideOutRight;
|
||||
z-index: 1003;
|
||||
}
|
||||
|
||||
@-webkit-keyframes CslideInRight {
|
||||
0% {
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: translate3d(-100%,0, 0);
|
||||
transform: translate3d(-100%,0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes CslideInRight {
|
||||
0% {
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: translate3d(-100%, 0,0);
|
||||
transform: translate3d(-100%, 0,0);
|
||||
}
|
||||
}
|
||||
|
||||
.CslideInRight {
|
||||
-webkit-animation-name: CslideInRight;
|
||||
animation-name: CslideInRight;
|
||||
-webkit-animation-name: slideInRight;
|
||||
animation-name: slideInRight;
|
||||
z-index: 1003;
|
||||
}
|
||||
|
||||
|
|
@ -827,14 +720,6 @@ textarea:focus
|
|||
transform: translate3d(-100%, 0, 0) !important;
|
||||
}
|
||||
|
||||
.animated.slideInRight,
|
||||
.animated.slideInLeft,
|
||||
.animated.CslideInUp,
|
||||
.animated.CslideOutDown {
|
||||
-webkit-animation-duration: 0.3s;
|
||||
animation-duration: 0.3s;
|
||||
}
|
||||
|
||||
/* removes 300ms in IE */
|
||||
-ms-touch-action: manipulation; /* IE10 /
|
||||
touch-action: manipulation; /* IE11+ */
|
||||
|
|
|
|||
108
src/js/routes.js
108
src/js/routes.js
|
|
@ -112,13 +112,6 @@ angular
|
|||
'main': {
|
||||
templateUrl: 'views/paymentUri.html',
|
||||
},
|
||||
'topbar': {
|
||||
templateUrl: 'views/includes/topbar.html',
|
||||
controller: function($scope) {
|
||||
$scope.goBackToState = 'walletHome';
|
||||
$scope.noColor = true;
|
||||
}
|
||||
}
|
||||
},
|
||||
needProfile: true
|
||||
})
|
||||
|
|
@ -134,14 +127,6 @@ angular
|
|||
'main': {
|
||||
templateUrl: 'views/join.html'
|
||||
},
|
||||
'topbar': {
|
||||
templateUrl: 'views/includes/topbar.html',
|
||||
controller: function($scope, gettext) {
|
||||
$scope.titleSection = gettext('Join shared wallet');
|
||||
$scope.goBackToState = 'add';
|
||||
$scope.noColor = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
.state('import', {
|
||||
|
|
@ -151,14 +136,6 @@ angular
|
|||
'main': {
|
||||
templateUrl: 'views/import.html'
|
||||
},
|
||||
'topbar': {
|
||||
templateUrl: 'views/includes/topbar.html',
|
||||
controller: function($scope, gettext) {
|
||||
$scope.titleSection = gettext('Import wallet');
|
||||
$scope.goBackToState = 'add';
|
||||
$scope.noColor = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
.state('importProfile', {
|
||||
|
|
@ -173,14 +150,6 @@ angular
|
|||
'main': {
|
||||
templateUrl: 'views/importLegacy.html',
|
||||
},
|
||||
'topbar': {
|
||||
templateUrl: 'views/includes/topbar.html',
|
||||
controller: function($scope, gettext) {
|
||||
$scope.titleSection = gettext('Import legacy wallet');
|
||||
$scope.goBackToState = 'add';
|
||||
$scope.noColor = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
})
|
||||
|
|
@ -192,14 +161,6 @@ angular
|
|||
'main': {
|
||||
templateUrl: 'views/create.html'
|
||||
},
|
||||
'topbar': {
|
||||
templateUrl: 'views/includes/topbar.html',
|
||||
controller: function($scope, gettext) {
|
||||
$scope.titleSection = gettext('Create new wallet');
|
||||
$scope.goBackToState = 'add';
|
||||
$scope.noColor = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
.state('copayers', {
|
||||
|
|
@ -209,9 +170,6 @@ angular
|
|||
'main': {
|
||||
templateUrl: 'views/copayers.html'
|
||||
},
|
||||
'topbar': {
|
||||
templateUrl: 'views/includes/topbar.html'
|
||||
}
|
||||
}
|
||||
})
|
||||
.state('preferences', {
|
||||
|
|
@ -233,14 +191,6 @@ angular
|
|||
'main': {
|
||||
templateUrl: 'views/preferencesLanguage.html'
|
||||
},
|
||||
'topbar': {
|
||||
templateUrl: 'views/includes/topbar.html',
|
||||
controller: function($scope, gettext) {
|
||||
$scope.titleSection = gettext('Language');
|
||||
$scope.goBackToState = 'preferences';
|
||||
$scope.noColor = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
.state('preferencesUnit', {
|
||||
|
|
@ -252,14 +202,6 @@ angular
|
|||
'main': {
|
||||
templateUrl: 'views/preferencesUnit.html'
|
||||
},
|
||||
'topbar': {
|
||||
templateUrl: 'views/includes/topbar.html',
|
||||
controller: function($scope, gettext) {
|
||||
$scope.titleSection = gettext('Unit');
|
||||
$scope.goBackToState = 'preferences';
|
||||
$scope.noColor = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
.state('preferencesAdvanced', {
|
||||
|
|
@ -372,14 +314,6 @@ angular
|
|||
'main': {
|
||||
templateUrl: 'views/add.html'
|
||||
},
|
||||
'topbar': {
|
||||
templateUrl: 'views/includes/topbar.html',
|
||||
controller: function($scope, gettext) {
|
||||
$scope.titleSection = gettext('Add wallet');
|
||||
$scope.closeToHome = true;
|
||||
$scope.noColor = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
.state('cordova', {
|
||||
|
|
@ -478,14 +412,16 @@ angular
|
|||
}
|
||||
|
||||
function animateTransition(entering, leaving) {
|
||||
console.log('[routes.js.540:entering:]', entering, leaving); //TODO
|
||||
var e = document.getElementById('mainSection');
|
||||
if (entering) {
|
||||
e.className = entering;
|
||||
} else {
|
||||
e.className = '';
|
||||
// Animation in progress?
|
||||
var x = document.getElementById('mainSectionDup');
|
||||
if (x) {
|
||||
console.log('Anim in progress');
|
||||
return;
|
||||
}
|
||||
|
||||
// console.log('[routes.js.540:entering:]', entering, leaving); //TODO
|
||||
var e = document.getElementById('mainSection');
|
||||
|
||||
var e2 = e.cloneNode(true);
|
||||
if (leaving)
|
||||
e2.className= leaving;
|
||||
|
|
@ -496,21 +432,33 @@ angular
|
|||
e2.id = 'mainSectionDup';
|
||||
c.appendChild(e2);
|
||||
|
||||
// TODO webkitTransitionEnd
|
||||
//el.addEventListener("transitionend", updateTransition, true);
|
||||
setTimeout(function(){
|
||||
console.log('[routes.js.556] DELETING OLD'); //TODO
|
||||
if (entering) {
|
||||
e.className = entering;
|
||||
} else {
|
||||
e.className = '';
|
||||
}
|
||||
|
||||
var cleanedUp = false;
|
||||
var cleanUp = function() {
|
||||
if (cleanedUp) return;
|
||||
cleanedUp=true;
|
||||
e2.parentNode.removeChild(e2);
|
||||
e2.innerHTML = "";
|
||||
}, 400);
|
||||
e.className = '';
|
||||
};
|
||||
e.addEventListener("animationend", cleanUp, true);
|
||||
e2.addEventListener("animationend", cleanUp, true);
|
||||
e.addEventListener("webkitAnimationEnd", cleanUp, true);
|
||||
e2.addEventListener("webkitAnimationEnd", cleanUp, true);
|
||||
setTimeout(cleanUp, 500);
|
||||
}
|
||||
|
||||
console.log('[routes.js.540] =>', fromState.name, toState.name); //TODO
|
||||
// console.log('[routes.js.540] =>', fromState.name, toState.name); //TODO
|
||||
if (pageWeight[fromState.name] && pageWeight[toState.name]) {
|
||||
if (pageWeight[fromState.name] > pageWeight[toState.name]) {
|
||||
animateTransition(null, 'CslideInLeft');
|
||||
animateTransition(null,'CslideOutRight', event);
|
||||
} else {
|
||||
animateTransition(null, 'CslideInRight');
|
||||
animateTransition('CslideInRight', null, event);
|
||||
}
|
||||
} else if (fromState.name) {
|
||||
if (pageWeight[toState.name]) {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue