diff options
| author | Dan Finlay <dan@danfinlay.com> | 2016-05-11 17:46:41 +0800 |
|---|---|---|
| committer | Dan Finlay <dan@danfinlay.com> | 2016-05-11 17:46:41 +0800 |
| commit | 2978e6e494b004de8dfe4ad8ac49d58ef5a2693f (patch) | |
| tree | 884785661170464b4ff2458c143266425bdea5e1 /ui/app/css/transitions.css | |
| parent | 82f9955f21077a9b25ee2127efb08336308eb71d (diff) | |
| download | tangerine-wallet-browser-2978e6e494b004de8dfe4ad8ac49d58ef5a2693f.tar.gz tangerine-wallet-browser-2978e6e494b004de8dfe4ad8ac49d58ef5a2693f.tar.zst tangerine-wallet-browser-2978e6e494b004de8dfe4ad8ac49d58ef5a2693f.zip | |
Fixed transitions
Diffstat (limited to 'ui/app/css/transitions.css')
| -rw-r--r-- | ui/app/css/transitions.css | 48 |
1 files changed, 21 insertions, 27 deletions
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); } |