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",
"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",

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

@ -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);
}