[CSS] visibility로 부드럽게 나타나기 & display는 외않되?

쿼카쿼카·2022년 10월 20일
0

CSS

목록 보기
1/6

display로 부드럽게 나타나기

.a {
  display: none;
  transition: all 1s ease-in-out;
}

.a:hover {
  display: block;
}

a에 hover 됐을 때 1초동안 쉽게 드갔다 나오듯이 부드럽게 나온다? 그런 것 없이 바로 빡! 하고 끝이다....

display는 왜 안 되는가?

렌더링 될 때 HTML CSS를 파싱하여 DOM, CSSOM이 생기고 둘이 결합해서 렌더링 트리가 만들어진다.

렌더링 트리는 화면에 출력되지 않아도 될 노드(script, meta 등)와 css에서 숨겨진 노드를 렌더링 트리에서 생략한다.

display: none은 css에서 숨겨진 노드라서 렌더링 트리에 없다.
즉!!!! transition의 시작이 없다!!!
위 코드에서 a는 hover 되는 순간 생기기 때문에 땋!!!나타나는 거다.

부드럽게 나오는 다양한 방법

height

.a {
  height: 0vh;
  transition: all 1s ease-in-out;
}

.a:hover {
  height: 30vh;
}

opacity

.a {
  opacity: 0;
  transition: all 1s ease-in-out;
}

.a:hover {
  opacity: 1;
}

transform

.a {
  transform: scale(0);
  transition: all 1s ease-in-out;
}

.a:hover {
  transform: scale(1);
}

위 세 가지 방법은 ppt에서 보던 부드러운 효과를 줄 것이다!

하지만 위 처럼 작성하면(특히 opacity) 박스가 공간을 차지하고 포인터 이벤트가 가능하다.

해결방법

pointer-event: none

.a {
  opacity: 0;
  pointer-events: none;
  transition: all 1s ease-in-out;
}

.a:hover {
  opacity: 1;
  pointer-events: visible;
}

visibility(이게 제일 좋아보임)

.a {
  opacity: 0;
  visibility: none;
  transition: all 1s ease-in-out;
}

.a:hover {
  opacity: 1;
  visibility: visible;
}

참고 사이트

https://velog.io/@dev-tinkerbell/display-none%EC%9D%B4-transition%EC%9D%B4-%EC%95%88%EB%A8%B9%ED%9E%88%EB%8A%94-%EC%9D%B4%EC%9C%A0

profile
쿼카에요

0개의 댓글