Hook up css animation

package.json

@@ -108,6 +108,7 @@
     "pumpify": "^1.3.4",
     "qrcode-npm": "0.0.3",
     "react": "^15.0.2",
+    "react-addons-css-transition-group": "^15.6.0",
     "react-burger-menu": "^2.1.4",
     "react-dom": "^15.5.4",
     "react-hyperscript": "^2.2.2",
@@ -116,6 +117,7 @@
     "react-select": "^1.0.0-rc.2",
     "react-simple-file-input": "^1.0.0",
     "react-tooltip-component": "^0.3.0",
+    "react-transition-group": "^2.2.0",
     "readable-stream": "^2.1.2",
     "redux": "^3.0.5",
     "redux-logger": "^2.10.2",

ui/app/app.js

@@ -35,6 +35,7 @@ const QrView = require('./components/qr-code')
 const HDCreateVaultComplete = require('./keychains/hd/create-vault-complete')
 const HDRestoreVaultScreen = require('./keychains/hd/restore-vault')
 const RevealSeedConfirmation = require('./keychains/hd/recover-seed/confirmation')
+const ReactCSSTransitionGroup = require('react-addons-css-transition-group')
 
 module.exports = connect(mapStateToProps)(App)
 
@@ -119,14 +120,39 @@ App.prototype.render = function () {
 }
 
 App.prototype.renderSidebar = function() {
-  if (!this.props.sidebarOpen) {
-    return null;
+  // if (!this.props.sidebarOpen) {
+  //   return null;
+  // }
+
+  return h('div', {
+  }, [
+    h('style', `
+      .sidebar-enter {
+        transition: transform 500ms ease-in-out;
+        transform: translateX(-100%);
+      }
+      .sidebar-enter.sidebar-enter-active {
+        transition: transform 500ms ease-in-out;
+        transform: translateX(0%);
+      }
+      .sidebar-leave {
+        transition: transform 500ms ease-in-out;
+        transform: translateX(0%);
       }
+      .sidebar-leave.sidebar-leave-active {
+        transition: transform 500ms ease-in-out;
+        transform: translateX(-100%);
+      }
+    `),
 
-  return h('div.phone-visible', {}, [
+    h(ReactCSSTransitionGroup, {
+      transitionName: 'sidebar',
+      transitionEnterTimeout: 500,
+      transitionLeaveTimeout: 500,
+    }, [
       // content
-    h(WalletView, {
-      responsiveDisplayClassname: '.phone-visible',
+      this.props.sidebarOpen ? h(WalletView, {
+        responsiveDisplayClassname: '.sidebar',
         style: {
           zIndex: 26,
           position: 'fixed',
@@ -136,19 +162,19 @@ App.prototype.renderSidebar = function() {
           bottom: '0px',
           opacity: '1',
           visibility: 'visible',
-        transition: 'transform 0.3s ease-out',
+          // transition: 'transform 1s ease-in',
           willChange: 'transform',
-        transform: 'translateX(0%)',
+          // transform: 'translateX(300px)',
           overflowY: 'auto',
           boxShadow: 'rgba(0, 0, 0, 0.15) 2px 2px 4px',
           width: '85%',
           height: '100%',
         },
-    }),
+      }) : undefined,
 
       // overlay
       // TODO: add onClick for overlay to close sidebar
-    h('div', {
+      this.props.sidebarOpen ? h('div', {
         style: {
           zIndex: 25,
           position: 'fixed',
@@ -158,10 +184,11 @@ App.prototype.renderSidebar = function() {
           bottom: '0px',
           opacity: '1',
           visibility: 'visible',
-        transition: 'opacity 0.3s ease-out, visibility 0.3s ease-out',
+          // transition: 'opacity 0.3s ease-out, visibility 0.3s ease-out',
           backgroundColor: 'rgba(0, 0, 0, 0.3)',
         }
-    }, [])
+      }, []) : undefined,
+    ])
   ])
 }
 

ui/app/css/transitions.css

@@ -22,6 +22,11 @@
   transition: transform 300ms ease-in;
 }
 
+.sidebar.from-left {
+  transform: translateX(-320px);
+  transition: transform 300ms ease-in;
+}
+
 /* loader transitions */
 .loader-enter, .loader-leave-active {
   opacity: 0.0;