리액트 드랍다운메뉴 구현 질문있습니다.

Question

const [isMenu, setIsMenu] = useState(''); const menuRef = useRef(); const handleIsOpen = () => { if (isMenu) { setIsMenu(''); } else { setIsMenu(1); } }; useEffect(() => { if (menuRef.current) { if (isMenu) { menuRef.current.classList.remove('close'); menuRef.current.classList.add('open'); } if (!isMenu) { menuRef.current.classList.remove('open'); menuRef.current.classList.add('close'); } } }, [isMenu]); 요소들.. 이런식으로 구현해놓고 이렇게 css 해줬습니다. export const Menu = styled.div` display: ${(props) => (props.visible ? 'block' : 'none')}; &.open { animation: ${menuOpenFrames} 0.3s linear forwards; } &.close { animation: ${menuCloseFrames} 0.3s linear forwards; }`클래스 open과 close가 각각 잘붙습니다만 display: ${(props) => (props.visible ? 'block' : 'none')}; 이 부분에서 none이 되어버려서 그런가 .close 애니메이션이 안먹습니다. 혹시 방법이없을까요?none을 안하고 그냥 block을 줘버리면 새로고침할때마다 애니메이션적용이 되서그런지 늘어났다가 다시 줄어드네요..

코댕맨 · Answer

아 <Menu className&#61;{isMenu ? 'open' : 'close'}>ㅡ. ㅡ 구현성공했습니다. 하루온종일 붙잡고있었는데 이렇게쉽게 풀어버릴수가..

리액트 드랍다운메뉴 구현 질문있습니다.

1개의 답변

기타 목록