m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-22 17:33:23 +01:00
Code

Fixed transitions

Browse Source
This commit is contained in:
Dan Finlay 2016-05-11 02:46:41 -07:00
parent 82f9955f21
commit 2978e6e494
2 changed files with 24 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
package.json
View File

@ -43,11 +43,10 @@
"pojo-migrator": "^2.1.0", "pojo-migrator": "^2.1.0",
"polyfill-crypto.getrandomvalues": "^1.0.0", "polyfill-crypto.getrandomvalues": "^1.0.0",
"pumpify": "^1.3.4", "pumpify": "^1.3.4",
"react": "^0.14.3", "react": "^15.0.2",
"react-addons-css-transition-group": "^0.14.7", "react-dom": "^15.0.2",
"react-dom": "^0.14.3",
"react-hyperscript": "^2.2.2", "react-hyperscript": "^2.2.2",
"react-redux": "^4.0.3", "react-redux": "^4.4.5",
"readable-stream": "^2.1.2", "readable-stream": "^2.1.2",
"redux": "^3.0.5", "redux": "^3.0.5",
"redux-logger": "^2.3.1", "redux-logger": "^2.3.1",

48
ui/app/css/transitions.css
View File

@ -1,48 +1,42 @@
/* initial positions */ /* universal */
.app-primary.from-right .main-enter { .app-primary .main-enter {
transform: translateX(400px);
position: absolute; position: absolute;
width: 100%; 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 */ /* center position */
.app-primary .main-enter.main-enter-active, .app-primary.from-right .main-enter-active,
.app-primary .main-leave { .app-primary.from-left .main-enter-active {
transform: translateX(0px);
position: absolute;
width: 100%;
transition: transform 300ms ease-in-out;
overflow-x: hidden; overflow-x: hidden;
transform: translateX(0px);
transition: transform 300ms ease-in;
} }
/* final positions */ /* exited positions */
.app-primary.from-left .main-leave-active { .app-primary.from-left .main-leave-active {
transform: translateX(400px); transform: translateX(360px);
position: absolute; transition: transform 300ms ease-in;
width: 100%;
transition: transform 300ms ease-in-out;
} }
.app-primary.from-right .main-leave-active { .app-primary.from-right .main-leave-active {
transform: translateX(-400px); transform: translateX(-360px);
position: absolute; transition: transform 300ms ease-in;
width: 100%;
transition: transform 300ms ease-in-out;
} }
/* loader transitions */ /* loader transitions */
.loader-enter, .loader-leave-active { .loader-enter, .loader-leave-active {
opacity: 0.0; opacity: 0.0;
transition: opacity 150 ease-in-out; transition: opacity 150 ease-in;
} }
.loader-enter-active, .loader-leave { .loader-enter-active, .loader-leave {
opacity: 1.0; 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);
} }