mirror of
https://github.com/trezor/trezor-wallet
synced 2024-11-13 20:08:56 +00:00
Fixed slide animation
This commit is contained in:
parent
b3dac4b5ab
commit
65c977aed7
@ -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;
|
@ -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>
|
||||
|
Loading…
Reference in New Issue
Block a user