고맙다 overflow: hidden

Summary

삽질정도

portfolio용 사이트를 제작 중 nav 바를 만드는데... transition이 마음대로 되지 않는 상황이 발생했습니다.

하지만 검색을 통해 금방 해결할 수 있었습니다. 굳!

 

---

Problem 1

nav에 hover를 했을 시 서브리스트가 나타나도록 하고 싶었습니다.

근데 이걸 그냥 display: none, display: block만 주자니 너무 딱딱하더라고요.

그래서 opacity를 주어 부드럽게 나타날 수 있게 만들고자 했습니다.

그러나.. display:none를 사용하면 transition이 제대로 적용되지 않습니다. 화면상에 아예 보이지 않으니까 렌더링 트리에서 누락된다고 하네요. 

그렇다고 visibility같은 애들을 쓰면 그 자리가 공백으로 채워져 있기 때문에 제가 원하는 모습은 아니었습니다.

자리 차지도 안하고 opacity랑 같이 transition 해주고 싶은 나의 마음...

Solved 1

display:none 대신 기본으로 height 값으로 0으로 주고 hover 했을 때 auto로 만들어주어 이 문제를 해결했습니다.

1차문제 해결 및 2차문제

Problem 2 

1차 문제 해결하자마자 나타난 2차 문제..

hover를 하고 다시 마우스가 벗어났을 때 서브리스트들이 거슬리게 사라지는 모습...

height와 opacity에 대한 transition 값을 다르게 줘보기도 했지만 딱히 바뀌는 점은 없었습니다. (얼추 동작했으나 부자연스러움ㅠ ㅠ..) 

Solved 2

부모 요소에 overflow:hidden을 주어 해결할 수 있었습니다. 얏호

 

---

해결 방법이 다 너무 간단했다....