CSS 디자인 15.7k 0

공지사항에 있는 템플릿 뜯어보면서 공부하는 중인데 "CSS 게시판 https://tgd.kr/18733230" 템플릿에서

- 드롭다운 리스트 효과

이 모듈을 참조해서 적용해봤더니

목록이 열릴 때는 부드럽게 켜지는 반면 닫힐 때는 훅 하고 꺼지는 느낌이더라구요

코드를 보면

.dropdown.open .dropdown-menu, 

.input-group-btn.open .dropdown-menu { 

    ~~~~~ 

}

.dropdown .dropdown-menu, 

.input-group-btn .dropdown-menu {

    ~~~~~

    transition: all 0.3s cubic-bezier(0.2, 1.5, 0, 1); 

}

이때 하단의 코드가 .dropdown에서 .dropdown.open으로 목록을 열 때 transition 커브를 지정해주는 부분이니까

반대로 .dropdown.open에서 .dropdown으로 닫을 때 커브를 지정해주니 열릴 때랑 닫을 때 모두 부드럽게 움직이는걸 확인했습니다

커브값은 https://cubic-bezier.com/ 이란 사이트에서 곡선을 직접 보면서 작업할 수 있습니다

그래프의 가로축이 시간이고 세로축이 진행도입니다

목록을 열 때 저렇게 잡으면 부드럽게 시작해서 목표값보다 살짝 커진 다음에 줄어드는 커브를 설계할 수 있습니다

반대로 닫을 때는 저 그래프의 대칭꼴로 잡아봤습니다

값은 원래 숫자들에서 1에서 빼고 앞뒤를 바꿔서 완전 대칭으로 잡아봤는데 아니어도 좋을 것 같습니다

그래서 코드에 적용해보면

.dropdown.open .dropdown-menu, 

.input-group-btn.open .dropdown-menu { 

    ~~~~~ 

    transition: all 0.2s cubic-bezier(.4,.5,0,1.25) ;   /* 닫힌 목록을 열 때  */

}

.dropdown .dropdown-menu, 

.input-group-btn .dropdown-menu {

    ~~~~~

    transition: all 0.2s cubic-bezier(1,-0.25,.6,.5) ;   /* 열려있는 목록을 닫을 때  */

}

이런 식으로 쓸 수 있을 것 같습니다

아니면 양쪽으로 작동 가능한 커브를 만들어도 가능합니다

.dropdown.open .dropdown-menu, 

.input-group-btn.open .dropdown-menu { 

    ~~~~~ 

}

.dropdown .dropdown-menu, 

.input-group-btn .dropdown-menu {

    ~~~~~

    transition: all 0.3s cubic-bezier(.9,-0.31,.1,1.3) ;   /* 양방향 가능  */

}

대신 덜 부드럽게 움직이는 것 같습니다

혹시나 해서 게시판에 먼저 찾아봤는데 아직 관련된 내용이 안보여서 작성해봤습니다

animation이나 transition이 들어가는 부분들에 적용해봐도 재미있을 것 같습니다