Speed up animations throughout the panel
This commit is contained in:
parent
cbdede75a7
commit
28992c5e43
12 changed files with 13 additions and 14 deletions
|
@ -61,7 +61,7 @@ const DropdownMenu = ({ renderToggle, children }: Props) => {
|
|||
return (
|
||||
<div>
|
||||
{renderToggle(onClickHandler)}
|
||||
<Fade timeout={250} in={visible} unmountOnExit>
|
||||
<Fade timeout={150} in={visible} unmountOnExit>
|
||||
<div
|
||||
ref={menu}
|
||||
onClick={e => {
|
||||
|
|
|
@ -9,7 +9,7 @@ const InputSpinner = ({ visible, children }: { visible: boolean, children: React
|
|||
appear
|
||||
unmountOnExit
|
||||
in={visible}
|
||||
timeout={250}
|
||||
timeout={150}
|
||||
>
|
||||
<div css={tw`absolute right-0 h-full flex items-center justify-end pr-3`}>
|
||||
<Spinner size={'small'}/>
|
||||
|
|
|
@ -62,7 +62,7 @@ const Modal: React.FC<Props> = ({ visible, appear, dismissable, showSpinnerOverl
|
|||
}, [ render ]);
|
||||
|
||||
return (
|
||||
<Fade timeout={250} appear={appear} in={render} unmountOnExit onExited={onDismissed}>
|
||||
<Fade timeout={150} appear={appear} in={render} unmountOnExit onExited={onDismissed}>
|
||||
<ModalMask
|
||||
onClick={e => {
|
||||
if (isDismissable && closeOnBackground) {
|
||||
|
@ -87,7 +87,7 @@ const Modal: React.FC<Props> = ({ visible, appear, dismissable, showSpinnerOverl
|
|||
<Spinner/>
|
||||
</div>
|
||||
}
|
||||
<div css={tw`bg-neutral-800 p-6 rounded shadow-md overflow-y-scroll transition-all duration-250`}>
|
||||
<div css={tw`bg-neutral-800 p-6 rounded shadow-md overflow-y-scroll transition-all duration-150`}>
|
||||
{children}
|
||||
</div>
|
||||
</ModalContainer>
|
||||
|
|
|
@ -4,7 +4,7 @@ import { CSSTransition } from 'react-transition-group';
|
|||
import tw from 'twin.macro';
|
||||
|
||||
const PageContentBlock: React.FC<{ className?: string }> = ({ children, className }) => (
|
||||
<CSSTransition timeout={250} classNames={'fade'} appear in>
|
||||
<CSSTransition timeout={150} classNames={'fade'} appear in>
|
||||
<>
|
||||
<ContentContainer css={tw`my-10`} className={className}>
|
||||
{children}
|
||||
|
|
|
@ -61,7 +61,7 @@ export default () => {
|
|||
return (
|
||||
<div className={'w-full fixed'} style={{ height: '2px' }}>
|
||||
<CSSTransition
|
||||
timeout={250}
|
||||
timeout={150}
|
||||
appear
|
||||
in={visible}
|
||||
unmountOnExit
|
||||
|
|
Reference in a new issue