ReactでAnimationPresenceみたいなのをライブラリ無しで行う

Reactで要素の表示非表示のアニメーションをさせる際、表示非表示をフラグで子要素を利用したいことがある。 motion (framer-motion)のAnimationPresenceなどを利用すればこれは解決できる。 const Item = (show) => { return <AnimationPresence> {show && <Box>Hello</Box>} </AnimationPresence> } const MyAnimatePresence: FC<PropsWithChildren<{}>> = ({ children }) => { const animateRef = useRef(children) const show = !!children const keyframes = [{ opacity: 0, }, { opacity: 1, }]