diff options
| -rw-r--r-- | package.json | 7 | ||||
| -rw-r--r-- | 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); } |