Framer-Motion을 이용하여, 버튼 클릭 시 창의 등장/숨김 애니메이션 효과 나타내기

useState를 이용하여 open이 true와 false를 반복하는 버튼이 존재하고,

이 버튼을 누를 때마다 새로운 창이 애니메이션 효과를 가지고 나타나고 사라지도록 해보자. 😉

우선 open 의 true, false를 위한 useState와 버튼의 이벤트를 만들자

  const [open, setOpen] = useState(false);
  const toggleSwitch = () => setOpen(!open);

그리고 버튼과 애니메이션 효과를 부여할 창을 만든다.

.........
	<Toggle onClick={toggleSwitch} />
    //버튼
    ..........
 	<Menu
		initial={{ scaleX: 0 }}
        //초기값 0으로 숨겨져있음
        animate={{ scaleX: open ? 1 : 0 }}
        //버튼을 toggle할 때마다 x방향으로 등장/숨김됌
        size={size}
    >
    //버튼 클릭마다 등장/숨김될 Box
</Menu>

완성!!😁