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

Hook up css animation

Browse Source
This commit is contained in:
sdtsui 2017-08-02 17:49:04 -07:00
parent 84aba21ae9
commit 8a39ef03c2
3 changed files with 75 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -108,6 +108,7 @@
"pumpify": "^1.3.4",
"qrcode-npm": "0.0.3",
"react": "^15.0.2",
"react-addons-css-transition-group": "^15.6.0",
"react-burger-menu": "^2.1.4",
"react-dom": "^15.5.4",
"react-hyperscript": "^2.2.2",
@ -116,6 +117,7 @@
"react-select": "^1.0.0-rc.2",
"react-simple-file-input": "^1.0.0",
"react-tooltip-component": "^0.3.0",
"react-transition-group": "^2.2.0",
"readable-stream": "^2.1.2",
"redux": "^3.0.5",
"redux-logger": "^2.10.2",

109
ui/app/app.js
View File

@ -35,6 +35,7 @@ const QrView = require('./components/qr-code')
const HDCreateVaultComplete = require('./keychains/hd/create-vault-complete')
const HDRestoreVaultScreen = require('./keychains/hd/restore-vault')
const RevealSeedConfirmation = require('./keychains/hd/recover-seed/confirmation')
const ReactCSSTransitionGroup = require('react-addons-css-transition-group')
module.exports = connect(mapStateToProps)(App)
@ -119,49 +120,75 @@ App.prototype.render = function () {
}
App.prototype.renderSidebar = function() {
if (!this.props.sidebarOpen) {
return null;
}
// if (!this.props.sidebarOpen) {
// return null;
// }
return h('div.phone-visible', {}, [
// content
h(WalletView, {
responsiveDisplayClassname: '.phone-visible',
style: {
zIndex: 26,
position: 'fixed',
top: '6%',
left: '0px',
right: '0px',
bottom: '0px',
opacity: '1',
visibility: 'visible',
transition: 'transform 0.3s ease-out',
willChange: 'transform',
transform: 'translateX(0%)',
overflowY: 'auto',
boxShadow: 'rgba(0, 0, 0, 0.15) 2px 2px 4px',
width: '85%',
height: '100%',
},
}),
// overlay
// TODO: add onClick for overlay to close sidebar
h('div', {
style: {
zIndex: 25,
position: 'fixed',
top: '6%',
left: '0px',
right: '0px',
bottom: '0px',
opacity: '1',
visibility: 'visible',
transition: 'opacity 0.3s ease-out, visibility 0.3s ease-out',
backgroundColor: 'rgba(0, 0, 0, 0.3)',
return h('div', {
}, [
h('style', `
.sidebar-enter {
transition: transform 500ms ease-in-out;
transform: translateX(-100%);
}
}, [])
.sidebar-enter.sidebar-enter-active {
transition: transform 500ms ease-in-out;
transform: translateX(0%);
}
.sidebar-leave {
transition: transform 500ms ease-in-out;
transform: translateX(0%);
}
.sidebar-leave.sidebar-leave-active {
transition: transform 500ms ease-in-out;
transform: translateX(-100%);
}
`),
h(ReactCSSTransitionGroup, {
transitionName: 'sidebar',
transitionEnterTimeout: 500,
transitionLeaveTimeout: 500,
}, [
// content
this.props.sidebarOpen ? h(WalletView, {
responsiveDisplayClassname: '.sidebar',
style: {
zIndex: 26,
position: 'fixed',
top: '6%',
left: '0px',
right: '0px',
bottom: '0px',
opacity: '1',
visibility: 'visible',
// transition: 'transform 1s ease-in',
willChange: 'transform',
// transform: 'translateX(300px)',
overflowY: 'auto',
boxShadow: 'rgba(0, 0, 0, 0.15) 2px 2px 4px',
width: '85%',
height: '100%',
},
}) : undefined,
// overlay
// TODO: add onClick for overlay to close sidebar
this.props.sidebarOpen ? h('div', {
style: {
zIndex: 25,
position: 'fixed',
top: '6%',
left: '0px',
right: '0px',
bottom: '0px',
opacity: '1',
visibility: 'visible',
// transition: 'opacity 0.3s ease-out, visibility 0.3s ease-out',
backgroundColor: 'rgba(0, 0, 0, 0.3)',
}
}, []) : undefined,
])
])
}

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

@ -22,6 +22,11 @@
transition: transform 300ms ease-in;
}
.sidebar.from-left {
transform: translateX(-320px);
transition: transform 300ms ease-in;
}
/* loader transitions */
.loader-enter, .loader-leave-active {
opacity: 0.0;