fix: transition animation (#2974)
switched to using headlessui transition instead of react-css-transition due to new version breaking the animationpull/2979/head
Brandon Cohen
2 years ago
committed by
GitHub
parent
baf1ea95a3
commit
98028bf2f4
@ -1,120 +0,0 @@
|
||||
import React, { useContext, useEffect, useRef } from 'react';
|
||||
import { CSSTransition as ReactCSSTransition } from 'react-transition-group';
|
||||
|
||||
interface CSSTransitionProps {
|
||||
show?: boolean;
|
||||
enter?: string;
|
||||
enterFrom?: string;
|
||||
enterTo?: string;
|
||||
leave?: string;
|
||||
leaveFrom?: string;
|
||||
leaveTo?: string;
|
||||
appear?: boolean;
|
||||
children?: React.ReactNode;
|
||||
}
|
||||
|
||||
const TransitionContext = React.createContext<{
|
||||
parent: { show?: boolean; isInitialRender?: boolean; appear?: boolean };
|
||||
}>({
|
||||
parent: {},
|
||||
});
|
||||
|
||||
function useIsInitialRender() {
|
||||
const isInitialRender = useRef(true);
|
||||
useEffect(() => {
|
||||
isInitialRender.current = false;
|
||||
}, []);
|
||||
return isInitialRender.current;
|
||||
}
|
||||
|
||||
const CSSTransition = ({
|
||||
show,
|
||||
enter = '',
|
||||
enterFrom = '',
|
||||
enterTo = '',
|
||||
leave = '',
|
||||
leaveFrom = '',
|
||||
leaveTo = '',
|
||||
appear,
|
||||
children,
|
||||
}: CSSTransitionProps) => {
|
||||
const enterClasses = enter.split(' ').filter((s) => s.length);
|
||||
const enterFromClasses = enterFrom.split(' ').filter((s) => s.length);
|
||||
const enterToClasses = enterTo.split(' ').filter((s) => s.length);
|
||||
const leaveClasses = leave.split(' ').filter((s) => s.length);
|
||||
const leaveFromClasses = leaveFrom.split(' ').filter((s) => s.length);
|
||||
const leaveToClasses = leaveTo.split(' ').filter((s) => s.length);
|
||||
|
||||
const addClasses = (node: HTMLElement, classes: string[]) => {
|
||||
classes.length && node.classList.add(...classes);
|
||||
};
|
||||
|
||||
const removeClasses = (node: HTMLElement, classes: string[]) => {
|
||||
classes.length && node.classList.remove(...classes);
|
||||
};
|
||||
|
||||
return (
|
||||
<ReactCSSTransition
|
||||
appear={appear}
|
||||
unmountOnExit
|
||||
in={show}
|
||||
addEndListener={(node, done) => {
|
||||
node.addEventListener('transitionend', done, false);
|
||||
}}
|
||||
onEnter={(node: HTMLElement) => {
|
||||
addClasses(node, [...enterClasses, ...enterFromClasses]);
|
||||
}}
|
||||
onEntering={(node: HTMLElement) => {
|
||||
removeClasses(node, enterFromClasses);
|
||||
addClasses(node, enterToClasses);
|
||||
}}
|
||||
onEntered={(node: HTMLElement) => {
|
||||
removeClasses(node, [...enterToClasses, ...enterClasses]);
|
||||
}}
|
||||
onExit={(node) => {
|
||||
addClasses(node, [...leaveClasses, ...leaveFromClasses]);
|
||||
}}
|
||||
onExiting={(node) => {
|
||||
removeClasses(node, leaveFromClasses);
|
||||
addClasses(node, leaveToClasses);
|
||||
}}
|
||||
onExited={(node) => {
|
||||
removeClasses(node, [...leaveToClasses, ...leaveClasses]);
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</ReactCSSTransition>
|
||||
);
|
||||
};
|
||||
|
||||
const Transition = ({ show, appear, ...rest }: CSSTransitionProps) => {
|
||||
const { parent } = useContext(TransitionContext);
|
||||
const isInitialRender = useIsInitialRender();
|
||||
const isChild = show === undefined;
|
||||
|
||||
if (isChild) {
|
||||
return (
|
||||
<CSSTransition
|
||||
appear={parent.appear || !parent.isInitialRender}
|
||||
show={parent.show}
|
||||
{...rest}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<TransitionContext.Provider
|
||||
value={{
|
||||
parent: {
|
||||
show,
|
||||
isInitialRender,
|
||||
appear,
|
||||
},
|
||||
}}
|
||||
>
|
||||
<CSSTransition appear={appear} show={show} {...rest} />
|
||||
</TransitionContext.Provider>
|
||||
);
|
||||
};
|
||||
|
||||
export default Transition;
|
||||
Loading…
Reference in new issue