arno/trezor-wallet
1
0
Fork 0
mirror of https://github.com/trezor/trezor-wallet synced 2024-12-25 16:38:08 +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 */
}
.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;

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

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