Beomlog - Toggle Menu Animation

토글메뉴를 만들고, 토글메뉴가 나올때마다 배경은 어둡게, 토글메뉴는 왼쪽에서 오른쪽으로 나오는 애니메이션을 만들었다.

scss파일에 다음과 같은 코드를 작성해 주었다. 각 애니메이션들은 별거 아니고 그냥 0% 와 100% 각각에 시작과 끝에 수행할 것들을 적어 놨다. 그리고 ToggleMenu.tsx 파일은 다음과 같이 작성했다.

toggle이 될때마다 뒤에 on 또는 off라는 클래스가 붙는다. 붙는 클래스에 따라서 애니메이션이 다르게 실행되는 것이다.  실제로 실행해서 넣어보면,

아주 잘 된다. 꾸며주기만 하면 되는데, 좀 귀찮다. 꾸미기는 나중에!