From 2978e6e494b004de8dfe4ad8ac49d58ef5a2693f Mon Sep 17 00:00:00 2001
From: Dan Finlay <dan@danfinlay.com>
Date: Wed, 11 May 2016 02:46:41 -0700
Subject: [PATCH] Fixed transitions

---
 package.json               |  7 +++---
 ui/app/css/transitions.css | 48 +++++++++++++++++---------------------
 2 files changed, 24 insertions(+), 31 deletions(-)

diff --git a/package.json b/package.json
index 73e48a08e..8f0af9cd5 100644
--- a/package.json
+++ b/package.json
@@ -43,11 +43,10 @@
     "pojo-migrator": "^2.1.0",
     "polyfill-crypto.getrandomvalues": "^1.0.0",
     "pumpify": "^1.3.4",
-    "react": "^0.14.3",
-    "react-addons-css-transition-group": "^0.14.7",
-    "react-dom": "^0.14.3",
+    "react": "^15.0.2",
+    "react-dom": "^15.0.2",
     "react-hyperscript": "^2.2.2",
-    "react-redux": "^4.0.3",
+    "react-redux": "^4.4.5",
     "readable-stream": "^2.1.2",
     "redux": "^3.0.5",
     "redux-logger": "^2.3.1",
diff --git a/ui/app/css/transitions.css b/ui/app/css/transitions.css
index e2225a98d..393a944f9 100644
--- a/ui/app/css/transitions.css
+++ b/ui/app/css/transitions.css
@@ -1,48 +1,42 @@
-/* initial positions */
-.app-primary.from-right .main-enter {
-  transform: translateX(400px);
+/* universal */
+.app-primary .main-enter {
   position: absolute;
   width: 100%;
-  transition: transform 300ms ease-in-out;
-}
-.app-primary.from-left .main-enter {
-  transform: translateX(-400px);
-  position: absolute;
-  width: 100%;
-  transition: transform 300ms ease-in-out;
 }
 
 /* center position */
-.app-primary .main-enter.main-enter-active,
-.app-primary .main-leave {
-  transform: translateX(0px);
-  position: absolute;
-  width: 100%;
-  transition: transform 300ms ease-in-out;
+.app-primary.from-right .main-enter-active,
+.app-primary.from-left .main-enter-active {
   overflow-x: hidden;
+  transform: translateX(0px);
+  transition: transform 300ms ease-in;
 }
 
-/* final positions */
+/* exited positions */
 .app-primary.from-left .main-leave-active {
-  transform: translateX(400px);
-  position: absolute;
-  width: 100%;
-  transition: transform 300ms ease-in-out;
+  transform: translateX(360px);
+  transition: transform 300ms ease-in;
 }
 .app-primary.from-right .main-leave-active {
-  transform: translateX(-400px);
-  position: absolute;
-  width: 100%;
-  transition: transform 300ms ease-in-out;
+  transform: translateX(-360px);
+  transition: transform 300ms ease-in;
 }
 
 /* loader transitions */
 .loader-enter, .loader-leave-active {
   opacity: 0.0;
-  transition: opacity 150 ease-in-out;
+  transition: opacity 150 ease-in;
 }
 .loader-enter-active, .loader-leave {
   opacity: 1.0;
-  transition: opacity 150 ease-in-out;
+  transition: opacity 150 ease-in;
+}
+
+/* entering positions */
+.app-primary.from-right .main-enter:not(.main-enter-active) {
+  transform: translateX(360px);
+}
+.app-primary.from-left .main-enter:not(.main-enter-active) {
+  transform: translateX(-360px);
 }