HomeAboutMeBlogGuest
© 2025 Sejin Cha. All rights reserved.
Built with Next.js, deployed on Vercel
🌟
Programmers 최종 플젝 6조/
[프론트] TWL
[프론트] TWL/
NavModal 인터렉티브하게 동작하도록 하기
NavModal 인터렉티브하게 동작하도록 하기
NavModal 인터렉티브하게 동작하도록 하기

NavModal 인터렉티브하게 동작하도록 하기

생성일
Dec 19, 2021 04:26 AM
태그
CSS
작성자
해결 완료
해결 완료

🔥 문제

티모의 의견대로 NavModal을 좀 더 사용자 친화적이게 동작시키고 싶었다.
클릭할 때마다 밑에서 위로 올라오는 애니메이션을 구현해야 하는데, 어떻게 해야할까?
 

⭐ 해결 방법

가설

먼저 모든 알고리즘 구현에는 가설이 존재해야 한다. 따라서 가설을 세운다.
  1. 특정 상황에 따라 스타일이 달라져야 한다.
  1. width와 height는 리플로우를 대거 발동시킨다. 이를 사용하는 것은 좋지 않다. 따라서 transform을 사용하여 리플로우를 최소화시킨다.
  1. transform을 이용하여 위치를 이동시키면, transition으로 속도 조절을 하며 관리를 하면 더욱 인터렉티브하게 동작할 것이다.
  1. 클릭할 때마다 동적인 효과를 transition하기 위해서는 아무래도 selector을 사용하거나, props를 사용하면 더욱 편할 것 같다. 먼저 props를 사용해보자.
 

👏🏻 참고자료