transations working, new schema

public/index.html

@@ -21,27 +21,20 @@
 
     <div class="off-canvas-wrap" id="off-canvas-wrap">
       <div class="inner-wrap">
-
-        <div ui-view="topbar"></div>
         <div ng-include="'views/includes/sidebar.html'" ng-if="index.hasProfile"></div>
 
         <div notifications="right top"></div> 
         <div ng-include="'views/includes/password.html'" ng-if="index.askPassword"
 ></div>
-
-
-        <section 
-          class="animation-slide"
-          ng-class="{
-          'main': index.hasProfile, 
-          'main-dark': mainDark, 
-          'animation-left': index.slideLeft, 
-          'animation-right': index.slideRight,
-          'animation-up': index.slideUp,
-          'animation-down': index.slideDown
-          }" 
-          ui-view="main"></section>
-        <div ui-view="menu" ng-if="!index.noFocusedWallet && !$root.hideMenuBar"></div>
+        <div id="sectionContainer">
+          <div id="mainSection">
+            <section ui-view="main"
+              ng-class="{
+                'main': index.hasProfile, 
+                'main-dark': mainDark, 
+              }"></section>
+          </div>
+        </div>
         <a class="close-menu" ng-click="index.closeMenu()"></a>
 
       </div>

public/views/backup.html

@@ -1,3 +1,10 @@
+<div 
+  class="topbar-container" 
+  ng-include="'views/includes/topbar.html'"
+  ng-init="titleSection='Backup'; goBackToState = 'preferences'">
+</div>
+
+
 
 <div class="content p20v" ng-controller="backupController as backup">
   <div class="row m20t">

public/views/includes/topbar.html

@@ -3,21 +3,22 @@
     <a id="hamburger" class="p10" ng-show="!goBackToState && !closeToHome  && !index.noFocusedWallet"
       ng-click="index.openMenu()"><i class="fi-list size-24"></i>
     </a>
-    <a ng-show="goBackToState"
+    <a ng-show="goBackToState" 
       ng-click="$root.go(goBackToState); goBackToState = null"><i class="icon-arrow-left3 icon-back"></i>
       <span class="text-back">{{'Back'|translate}}</span>
     </a>
-  </section>
 
-  <section class="right-small" ng-show="!goBackToState">
-    <a id="camera-icon" ng-show="!closeToHome && index.isComplete" class="p10"
-      ng-click="topbar.openScanner()"><i class="icon-scan size-21"></i></a>
-    <a ng-show="closeToHome" class="p10"
+    <a ng-show="closeToHome" class="p10 "
       ng-click="topbar.goHome(); closeToHome = null">
       <span class="text-close">{{'Close'|translate}}</span>
     </a>
   </section>
 
+  <section class="right-small" ng-show="showCamera">
+    <a id="camera-icon" ng-show="index.isComplete" class="p10"
+      ng-click="topbar.openScanner()"><i class="icon-scan size-21"></i></a>
+  </section>
+
   <section class="middle tab-bar-section">
     <h1 class="title ellipsis" ng-style="{'color': noColor ? '#4B6178' : index.backgroundColor}">
       {{(titleSection|translate) || index.walletName}}

public/views/preferences.html

@@ -1,3 +1,11 @@
+
+<div 
+  class="topbar-container" 
+  ng-include="'views/includes/topbar.html'"
+  ng-init="titleSection='Preferences'; closeToHome = true">
+</div>
+
+
 <div class="content preferences" ng-controller="preferencesController as preferences">
 
   <ul class="no-bullet m0 size-14">

public/views/preferencesAbout.html

@@ -1,3 +1,9 @@
+<div 
+  class="topbar-container" 
+  ng-include="'views/includes/topbar.html'"
+  ng-init="titleSection='About Copay'; goBackToState = 'preferences'">
+</div>
+
 <div class="content p20v" ng-controller="preferencesAbout as about">
   <ul class="no-bullet m0 size-14">
     <div class="text-center small-5 small-centered columns m20b" >

public/views/preferencesAdvanced.html

@@ -1,3 +1,9 @@
+<div 
+  class="topbar-container" 
+  ng-include="'views/includes/topbar.html'"
+  ng-init="titleSection='Advanced'; goBackToState = 'preferences'">
+</div>
+
 <div class="content preferences" ng-controller="preferencesAdvancedController as preferences">
 
   <ul class="no-bullet m0 size-14">

public/views/preferencesAltCurrency.html

@@ -1,3 +1,11 @@
+<div 
+  class="topbar-container" 
+  ng-include="'views/includes/topbar.html'"
+  ng-init="titleSection='Alternative Currency'; goBackToState = 'preferences'">
+</div>
+
+
+
 <div class="content preferences" ng-controller="preferencesAltCurrencyController as prefAltCurrency">
   <div ng-repeat="altCurrency in prefAltCurrency.alternativeOpts" ng-click="prefAltCurrency.save(altCurrency)" class="line-b p20 size-14">
     <span>{{altCurrency.name}}</span>

public/views/preferencesBwsUrl.html

@@ -1,3 +1,11 @@
+<div 
+  class="topbar-container" 
+  ng-include="'views/includes/topbar.html'"
+  ng-init="titleSection='Bitcore Wallet Service'; goBackToState = 'preferences'">
+</div>
+
+
+
 <div class="content preferences p20v" ng-controller="preferencesBwsUrlController as prefBwsUrl">
   <form name="settingsBwsUrlForm" ng-submit="prefBwsUrl.save()" class="columns">
     <label>Bitcore Wallet Service URL</label>

public/views/preferencesColor.html

@@ -1,3 +1,11 @@
+<div 
+  class="topbar-container" 
+  ng-include="'views/includes/topbar.html'"
+  ng-init="titleSection='Color'; goBackToState = 'preferences'">
+</div>
+
+
+
 <div class="content preferences" ng-controller="preferencesColorController as p">
   <div ng-repeat="c in p.colorOpts" ng-click="p.save(c)" class="line-b p20 size-14">
     <span ng-style="{'color': c}">&block;</span>

public/views/preferencesDeleteWallet.html

@@ -1,3 +1,10 @@
+<div 
+  class="topbar-container" 
+  ng-include="'views/includes/topbar.html'"
+  ng-init="titleSection='Delete Wallet'; goBackToState = 'preferencesAdvanced'">
+</div>
+
+
 <div class="content p20v" ng-controller="preferencesDeleteWalletController as preferences">
   <h4 class="text-warning text-center m0" translate>Warning!</h4>
   <div class="box-notification" ng-show="preferences.error" >

public/views/preferencesLogs.html

@@ -1,3 +1,11 @@
+<div 
+  class="topbar-container" 
+  ng-include="'views/includes/topbar.html'"
+  ng-init="titleSection='Logs'; goBackToState = 'about'">
+</div>
+
+
+
 <div class="content p20v" ng-controller="preferencesLogs as logs">
 
   <div class="row columns">

public/views/walletHome.html

@@ -1,5 +1,10 @@
-<div ng-controller="walletHomeController as home">
 
+<div class="topbar-container" 
+  ng-include="'views/includes/topbar.html'"
+  ng-init="showCamera = true">
+</div>
+
+<div ng-controller="walletHomeController as home">
   <div class="row columns m20tp" ng-show="index.noFocusedWallet">
     <div class="text-center text-warning m20b">
       <i class="fi-alert"></i> <span translate>You do not have any wallet</span>
@@ -448,3 +453,5 @@
 
   </div>
 </div>
+<div class="extra-margin-bottom"></div>
+<div ng-include="'views/includes/menu.html'"></div>

src/css/main.css

@@ -140,7 +140,7 @@ input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill, inpu
 
 .main {
   background-color: #fff;
-  padding: 45px 0 58px 0;
+  padding: 0 0 58px 0;
   position: relative;
 }
 

src/css/mobile.css

@@ -379,52 +379,212 @@ a, button, .button, input, textarea, select {
   z-index: 1002;
 }
 
-/*******************************************/
+/* === */
 
-.pin {
-  margin: 0 auto;
-  width: 25%;
-  text-align: center;
-  overflow: hidden;
+
+/* Have to set height explicity on ui-view 
+to prevent collapsing during animation*/
+.main[ui-view]{
+ height: 100%; /* TODO */
 }
 
-.pin-box {
-  color: #fff;
-  font-size: 14px;
-  width: 25%;
-  float: left;
+.ui-view-container {
+  position: relative;
+  height: 100%;
 }
 
-.pin-numbers {
+[ui-view].slideDown,
+[ui-view].slideRight,
+[ui-view].slideLeft {
+  z-index:100;
+}
+
+#mainSection, #mainSectionDup {
+  height:100%;
   position: absolute;
-  bottom: 0;
-  width: 100%;
-  text-align: center;
-  height: 72%;
+  left: 0;
+  right: 0;
+  transition:all 0.3s linear;
+  -webkit-animation-fill-mode: both;
+  animation-fill-mode: both;
 }
 
-.pin-button-bar {
-  height: 25%;
+@-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);
+  }
 }
 
-a.pin-button {
-  margin: 2.5%;
-  display: inline-block;
-  color: #CED5DC;
-  font-size: 210%;
-  font-weight: 100;
-  border: 1px solid #4B6178;
-  border-radius: 100%;
-  width: 70px;
-  padding-top: 0.5rem;
-  height: 70px;
+@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);
+  }
 }
 
-a.pin-button:active {
-  color: #fff;
-  background-color: #3E5367;
+.CslideInUp {
+  -webkit-animation: CslideInUp 0.3s 1;
+  animation: CslideInUp 0.3s 1;
+  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: CslideOutDown 0.3s 1;
+  animation: CslideOutDown 0.3s 1;
+  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: CslideInLeft 0.3s 1;
+  animation: CslideInLeft 0.3s 1;
+  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: CslideInRight 0.3s 1;
+  animation: CslideInRight 0.3s 1;
+  z-index: 1003;
+}
+
+/*  */
+/* [ui-view].slideDown.ng-enter { */
+/*   -webkit-transform:translate3d(0, 0, 0); */
+/*   -moz-transform:translate3d(0, 0, 0); */
+/*   transform:translate3d(0, 0, 0); */
+/*   z-index:120; */
+/* } */
+/*  */
+/* [ui-view].slideDown.ng-enter-active { */
+/*   z-index:120; */
+/* } */
+/*  */
+/*  [ui-view].slideDown.ng-leave { */
+/*   -webkit-transform:translate3d(0, 0, 0); */
+/*   z-index:100; */
+/* } */
+/*  */
+/* [ui-view].slideDown.ng-leave-active { */
+/*   -webkit-transform:translate3d(0, 0, 0); */
+/*   z-index:101; */
+/* } */
+/*  */
+
+
+[ui-view].slideRight.ng-enter {
+  -webkit-transform:translate3d(100%, 0, 0);
+  z-index:100;
+}
+
+[ui-view].slideRight.ng-enter-active {
+  -webkit-transform:translate3d(0, 0, 0);
+  z-index:100;
+}
+
+ [ui-view].slideRight.ng-leave {
+  -webkit-transform:translate3d(0, 0, 0);
+  z-index:120;
+}
+
+[ui-view].slideRight.ng-leave-active {
+  -webkit-transform:translate3d(100%,0, 0);
+  z-index:120;
+}
+
+
+
+/* == */
+
 .icon-circle, .icon-circle-active {
   color:  #1ABC9C;
 }
@@ -685,95 +845,6 @@ textarea:focus
   color: #B7C2CD;
 }
 
-.animation-slide {
-  position: absolute;
-  background: #fff;
-  display: block;
-  width: 100%;
-  height: 100%;
-  top: 0;
-  left: 0;
-  -webkit-backface-visibility: hidden;
-  -webkit-transform: translate3d(0, 0, 0);
-  transform: translate3d(0, 0, 0);
-}
-
-.animation-slide.ng-enter, 
-.animation-slide.ng-leave {
-  -webkit-transition: 0.25s ease all;
-  transition: 0.25s ease all;
-}
-
-.animation-slide.ng-enter.ng-enter-active {
-  -webkit-transform: translate3d(0, 0, 0);
-  transform: translate3d(0, 0, 0);
-  visibility: visible;
-}
-
-.animation-slide.ng-leave {
-  -webkit-transform: translate3d(0, 0, 0);
-  transform: translate3d(0, 0, 0);
-  visibility: hidden;
-}
-
-.animation-left.ng-enter {
-  -webkit-transform: translate3d(100%, 0, 0);
-  transform: translate3d(100%, 0, 0);
-  -webkit-transition-delay: 0.1s;
-  transition-delay: 0.1s;
-  visibility: hidden;
-}
-.animation-right.ng-enter {
-  -webkit-transform: translate3d(-100%, 0, 0);
-  transform: translate3d(-100%, 0, 0);
-  -webkit-transition-delay: 0.1s;
-  transition-delay: 0.1s;
-  visibility: hidden;
-}
-
-.animation-up.ng-enter {
-  -webkit-transform: translate3d(0, 100%, 0);
-  transform: translate3d(0, 100%, 0);
-  -webkit-transition-delay: 0.1s;
-  transition-delay: 0.1s;
-}
-.animation-down.ng-enter {
-  -webkit-transform: translate3d(0, -100%, 0);
-  transform: translate3d(0, -100%, 0);
-  -webkit-transition-delay: 0.1s;
-  transition-delay: 0.1s;
-}
-
-.animation-left.ng-leave.animation-left.ng-leave-active {
-  -webkit-transform: translate3d(-100%, 0, 0);
-  transform: translate3d(-100%, 0, 0);
-  -webkit-transition-delay: 0.1s;
-  transition-delay: 0.1s;
-  visibility: hidden;
-}
-.animation-right.ng-leave.animation-right.ng-leave-active {
-  -webkit-transform: translate3d(100%, 0, 0);
-  transform: translate3d(100%, 0, 0);
-  -webkit-transition-delay: 0.1s;
-  transition-delay: 0.1s;
-  visibility: hidden;
-}
-
-.animation-up.ng-leave.animation-up.ng-leave-active {
-  -webkit-transform: translate3d(0, -100%, 0);
-  transform: translate3d(0, -100%, 0);
-  -webkit-transition-delay: 0.1s;
-  transition-delay: 0.1s;
-  visibility: hidden;
-}
-.animation-down.ng-leave.animation-down.ng-leave-active {
-  -webkit-transform: translate3d(0, 100%, 0);
-  transform: translate3d(0, 100%, 0);
-  -webkit-transition-delay: 0.1s;
-  transition-delay: 0.1s;
-  visibility: hidden;
-}
-
 .tab-view {
   -webkit-transform: translate3d(-100%, 0, 0);
   transform: translate3d(-100%, 0, 0);
@@ -797,8 +868,8 @@ textarea:focus
 
 .animated.slideInRight, 
 .animated.slideInLeft, 
-.animated.slideInUp, 
-.animated.slideInDown {
+.animated.CslideInUp, 
+.animated.CslideOutDown {
   -webkit-animation-duration: 0.3s;
   animation-duration: 0.3s;
 }

src/js/controllers/index.js

@@ -11,6 +11,12 @@ angular.module('copayApp.controllers').controller('indexController', function($r
     return (parseFloat(number.toPrecision(12)));
   };
 
+
+  self.goHome = function() {
+    go.walletHome();
+  };
+
+
   self.menu = [{
     'title': gettext('Home'),
     'icon': 'icon-home',

src/js/controllers/preferences.js

@@ -3,7 +3,6 @@
 angular.module('copayApp.controllers').controller('preferencesController',
   function($scope, $rootScope, $filter, $timeout, $modal, $log, lodash, configService, profileService) {
     var config = configService.getSync();
-
     this.unitName = config.wallet.settings.unitName;
     this.bwsurl = config.bws.url;
     this.selectedAlternative = {

src/js/routes.js

@@ -78,17 +78,8 @@ angular
         needProfile: true,
         views: {
           'main': {
-            templateUrl: 'views/walletHome.html'
+            templateUrl: 'views/walletHome.html',
           },
-          'topbar': {
-            templateUrl: 'views/includes/topbar.html'
-          },
-          'menu': {
-            templateUrl: 'views/includes/menu.html',
-            controller: function($scope) {
-              $scope.activeMenu = 'walletHome';
-            }
-          }
         }
       })
       .state('createProfile', {
@@ -98,7 +89,8 @@ angular
           'main': {
             templateUrl: 'views/createProfile.html',
             controller: function($scope) {
-              $scope.mainDark = true;
+              // TODO
+              //              $scope.mainDark = true;
               $scope.noColor = true;
             }
           }
@@ -229,15 +221,8 @@ angular
         needProfile: true,
         views: {
           'main': {
-            templateUrl: 'views/preferences.html'
+            templateUrl: 'views/preferences.html',
           },
-          'topbar': {
-            templateUrl: 'views/includes/topbar.html',
-            controller: function($scope) {
-              $scope.titleSection = 'Preferences';
-              $scope.closeToHome = true;
-            }
-          }
         }
       })
       .state('preferencesLanguage', {
@@ -286,13 +271,6 @@ angular
           'main': {
             templateUrl: 'views/preferencesAdvanced.html'
           },
-          'topbar': {
-            templateUrl: 'views/includes/topbar.html',
-            controller: function($scope) {
-              $scope.titleSection = 'Advanced';
-              $scope.goBackToState = 'preferences';
-            }
-          }
         }
       })
       .state('preferencesColor', {
@@ -304,13 +282,6 @@ angular
           'main': {
             templateUrl: 'views/preferencesColor.html'
           },
-          'topbar': {
-            templateUrl: 'views/includes/topbar.html',
-            controller: function($scope, gettext) {
-              $scope.titleSection = gettext('Color');
-              $scope.goBackToState = 'preferences';
-            }
-          }
         }
       })
 
@@ -323,14 +294,6 @@ angular
           'main': {
             templateUrl: 'views/preferencesAltCurrency.html'
           },
-          'topbar': {
-            templateUrl: 'views/includes/topbar.html',
-            controller: function($scope, gettext) {
-              $scope.titleSection = gettext('Alternative Currency');
-              $scope.goBackToState = 'preferences';
-              $scope.noColor = true;
-            }
-          }
         }
       })
       .state('preferencesBwsUrl', {
@@ -342,14 +305,7 @@ angular
           'main': {
             templateUrl: 'views/preferencesBwsUrl.html'
           },
-          'topbar': {
-            templateUrl: 'views/includes/topbar.html',
-            controller: function($scope) {
-              $scope.titleSection = 'Bitcore Wallet Service';
-              $scope.goBackToState = 'preferences';
-              $scope.noColor = true;
-            }
-          }
+             
         }
       })
       .state('delete', {
@@ -361,14 +317,6 @@ angular
           'main': {
             templateUrl: 'views/preferencesDeleteWallet.html'
           },
-          'topbar': {
-            templateUrl: 'views/includes/topbar.html',
-            controller: function($scope, gettext) {
-              $scope.titleSection = gettext('Delete Wallet');
-              $scope.goBackToState = 'preferences';
-              $scope.goBackToState = 'preferencesAdvanced';
-            }
-          }
         }
       })
       .state('about', {
@@ -380,14 +328,6 @@ angular
           'main': {
             templateUrl: 'views/preferencesAbout.html'
           },
-          'topbar': {
-            templateUrl: 'views/includes/topbar.html',
-            controller: function($scope, gettext) {
-              $scope.titleSection = gettext('About');
-              $scope.goBackToState = 'preferences';
-              $scope.noColor = true;
-            }
-          }
         }
       })
       .state('logs', {
@@ -399,14 +339,6 @@ angular
           'main': {
             templateUrl: 'views/preferencesLogs.html'
           },
-          'topbar': {
-            templateUrl: 'views/includes/topbar.html',
-            controller: function($scope, gettext) {
-              $scope.titleSection = gettext('Logs');
-              $scope.goBackToState = 'about';
-              $scope.noColor = true;
-            }
-          }
         }
       })
       .state('backup', {
@@ -418,13 +350,6 @@ angular
           'main': {
             templateUrl: 'views/backup.html'
           },
-          'topbar': {
-            templateUrl: 'views/includes/topbar.html',
-            controller: function($scope, gettext) {
-              $scope.titleSection = gettext('Backup');
-              $scope.goBackToState = 'preferences';
-            }
-          }
         }
       })
       .state('settings', {
@@ -477,7 +402,7 @@ angular
         needProfile: false
       });
   })
-  .run(function($rootScope, $state, $log, gettextCatalog, uriHandler, isCordova, amMoment, profileService) {
+  .run(function($rootScope, $state, $log, gettextCatalog, uriHandler, isCordova, amMoment, profileService, $timeout) {
     FastClick.attach(document.body);
 
     // Auto-detect browser language
@@ -522,28 +447,8 @@ angular
       importLegacy: 12
     };
 
-
-    $rootScope.$on('$stateChangeSuccess', function() {
-      $rootScope.$emit('Animation/Disable');
-    });
-
     $rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams) {
 
-      if (pageWeight[fromState.name] > pageWeight[toState.name]) {
-        if (pageWeight[fromState.name] == 11) {
-          $rootScope.$emit('Animation/SlideDown');
-        }
-        else {
-          $rootScope.$emit('Animation/SlideRight');
-        }
-      } else if (pageWeight[fromState.name] < pageWeight[toState.name]) {
-        if (pageWeight[toState.name] < 12) {
-          $rootScope.$emit('Animation/SlideUp');
-        }
-        else {
-          $rootScope.$emit('Animation/SlideLeft');
-        }
-      }
 
       if (!profileService.profile && toState.needProfile) {
 
@@ -571,5 +476,48 @@ angular
         $state.transitionTo('copayers');
         event.preventDefault();
       }
+
+      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 = '';
+        }
+
+        var e2 = e.cloneNode(true);
+        if (leaving)
+          e2.className=  leaving;
+        else 
+          e2.className ='';
+
+        var c = document.getElementById('sectionContainer');
+        e2.id = 'mainSectionDup';
+        c.appendChild(e2);
+
+        // TODO  webkitTransitionEnd
+//el.addEventListener("transitionend", updateTransition, true);
+        setTimeout(function(){
+console.log('[routes.js.556] DELETING OLD'); //TODO
+          e2.parentNode.removeChild(e2);
+          e2.innerHTML = "";
+        }, 400);
+      }
+
+      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');
+         } else {
+          animateTransition(null, 'CslideInRight');
+         }
+      } else if (fromState.name) {
+        if (pageWeight[toState.name]) {
+          animateTransition('CslideInUp', null);
+        } else {
+          animateTransition(null, 'CslideOutDown');
+        }
+      }
     });
   });