arno/trezor-wallet
1
0
Fork 0
mirror of https://github.com/trezor/trezor-wallet synced 2024-11-28 03:08:30 +00:00
Code Issues Releases Wiki Activity

Fixed slide animation

Browse Source
This commit is contained in:
Vladimir Volek 2018-09-18 18:03:00 +02:00
parent b3dac4b5ab
commit 65c977aed7
2 changed files with 63 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
src/support/BaseStyles.js
View File

@ -63,6 +63,44 @@ const baseStyles = () => injectGlobal`
url('./fonts/roboto/roboto-mono-v4-greek_cyrillic-ext_greek-ext_latin_cyrillic_vietnamese_latin-ext-regular.svg#RobotoMono') format('svg'); /* Legacy iOS */ url('./fonts/roboto/roboto-mono-v4-greek_cyrillic-ext_greek-ext_latin_cyrillic_vietnamese_latin-ext-regular.svg#RobotoMono') format('svg'); /* Legacy iOS */
} }
.slide-left-enter {
transform: translate(100%);
pointer-events: none;
}
.slide-left-enter.slide-left-enter-active {
transform: translate(0%);
transition: transform 300ms ease-in-out;
}
.slide-left-exit {
transform: translate(-100%);
}
.slide-left-exit.slide-left-exit-active {
transform: translate(0%);
transition: transform 300ms ease-in-out;
}
.slide-right-enter {
transform: translate(-100%);
pointer-events: none;
}
.slide-right-enter.slide-right-enter-active {
transform: translate(0%);
transition: transform 300ms ease-in-out;
}
.slide-right-exit {
transform: translate(-100%);
}
.slide-right-exit.slide-right-exit-active {
transform: translate(-200%);
transition: transform 300ms ease-in-out;
}
`; `;
export default baseStyles; export default baseStyles;

47
src/views/Wallet/components/LeftNavigation/index.js
View File

@ -58,24 +58,20 @@ const A = styled.a`
} }
`; `;
const Transition = ({ children, animationType }) => ( const TransitionMenu = (props: TransitionMenuProps): React$Element<TransitionGroup> => (
<TransitionGroupWrapper component="div"> <TransitionGroupWrapper component={null} className="transition-container">
<CSSTransition <CSSTransition
key={animationType} key={props.animationType}
onExit={() => { onExit={() => { window.dispatchEvent(new Event('resize')); }}
console.log('ON EXIT');
window.dispatchEvent(new Event('resize'));
}}
onEntering={el => console.warn('Entering', el)}
onExited={() => window.dispatchEvent(new Event('resize'))} onExited={() => window.dispatchEvent(new Event('resize'))}
classNames={animationType}
appear={false}
timeout={20000}
in in
out out
classNames={props.animationType}
appear={false}
timeout={300}
> >
<TransitionContentWrapper> <TransitionContentWrapper>
{children} { props.children }
</TransitionContentWrapper> </TransitionContentWrapper>
</CSSTransition> </CSSTransition>
</TransitionGroupWrapper> </TransitionGroupWrapper>
@ -138,6 +134,22 @@ class LeftNavigation extends Component {
} }
render() { render() {
const { props } = this;
let menu;
if (this.shouldRenderAccounts()) {
menu = (
<TransitionMenu animationType="slide-left">
<AccountMenu {...props} />
</TransitionMenu>
);
} else if (this.shouldRenderCoins()) {
menu = (
<TransitionMenu animationType="slide-right">
<CoinMenu {...props} />
</TransitionMenu>
);
}
return ( return (
<StickyContainer <StickyContainer
location={this.props.location.pathname} location={this.props.location.pathname}
@ -153,16 +165,7 @@ class LeftNavigation extends Component {
/> />
<Body> <Body>
{this.state.shouldRenderDeviceSelection && <DeviceMenu {...this.props} />} {this.state.shouldRenderDeviceSelection && <DeviceMenu {...this.props} />}
{this.shouldRenderAccounts() && ( {menu}
<Transition animationType="slide-left">
<AccountMenu {...this.props} />
</Transition>
)}
{this.shouldRenderCoins() && (
<Transition animationType="slide-right">
<CoinMenu {...this.props} />
</Transition>
)}
</Body> </Body>
<Footer className="sticky-bottom"> <Footer className="sticky-bottom">
<Help> <Help>