Speed up animations throughout the panel

This commit is contained in:
Dane Everitt 2020-07-05 13:56:04 -07:00
parent cbdede75a7
commit 28992c5e43
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
12 changed files with 13 additions and 14 deletions

View file

@ -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 => {

View file

@ -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'}/>

View file

@ -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>

View file

@ -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}

View file

@ -61,7 +61,7 @@ export default () => {
return (
<div className={'w-full fixed'} style={{ height: '2px' }}>
<CSSTransition
timeout={250}
timeout={150}
appear
in={visible}
unmountOnExit