[CSS] visibility 속성

1. 마주했던 문제

현재 개인 프로젝트를 진행하고 있는데, 스크롤 컨트롤러 버튼을 구현하고 싶었다.

특정한 길이 만큼 스크롤이 진행이 되면 스크롤 컨트롤러 버튼이 나타나고 스크롤이 진행되지 않았으면 버튼이 화면에 나타나지 않도록 구현하였다.

처음 사용했던 것은 css의 display 속성을 사용했다.

스크롤이 진행되면 display:block을 해주고 일정 스크롤 이하이면 display:none을 해주는 방식으로 구현을 하였다.

그리고 필자는 이 버튼이 나타나고 사라질 때 마다 opacity 값이 서서히 변하는 애니메이션을 주고 싶었다.

따라서 transition과 opacity 값을 이용하여 아래와 같이 구현해보았다.
(React와 styled-components를 사용한 코드이다.)🔥

2. display속성은 애니메이션 적용이 안돼🥺

(생략)
<ScrollBtnWrapper isDisplay={controllerShow}
  onClick={onScrollBtnClickHandler}>
          <ScrollButton className='up-btn'>∧</ScrollButton>
          <ScrollButton className='down-btn'>∨</ScrollButton>
        </ScrollBtnWrapper>
    
(생략)

const ScrollBtnWrapper = styled.div`
  position:fixed;
  width:5vh;
  height:15vh;
  right:4vw;
  bottom:7vh;
  transition: all 0.5s;
  ${(props)=> {
    if(!props.isDisplay) {
      return css`
        display:none;
        opacity:0;
      `
    }
  }}
`

하지만 원했던 애니메이션은 적용되지 않았고 display 속성만 적용 되는 듯이 딱 딱 끊기며 화면에 나타났다.

이를 해결하기 위해 구글링을 하여 visibility 라는 속성을 알게 되었다.

3. visibility 속성으로 해결!

display:none 속성을 visibility: hidden 으로 변경해주니 애니메이션도 적용이 되었다.
visibility속성은 hidden, visible, collapse 이렇게 세 가지 값을 가질 수 있다.

자세한 내용은 MDN을 활용하면 더 도움이 될 것이다.
https://developer.mozilla.org/ko/docs/Web/CSS/visibility

4. visibility와 display의 차이

MDN 사이트를 확인해보면,

위의 내용을 확인할 수 있다.

visibility:hidden 을 사용하면 그 요소가 차지하던 공간은 그대로 유지되지만 화면에는 보이지 않게 된다. 즉, 레이아웃이 그대로 유지된다.
반면, display:none 을 사용하면 그 요소가 아예 없었던 것 처럼 공간이 유지 되지 않아 레이아웃이 변경된다.

👉 이 사실로는 왜 display속성이 애니메이션이 통하지 않았는지 이해하기 어렵다.

display 속성과 transition 속성의 관계❓

1. 렌더링 트리

HTML과 CSS를 파싱하면 DOM과 CSSOM이 생성되는데 이 둘을 결합하여 렌더링 트리를 생성한다.
렌더링 트리는 화면에 출력될 요소들의 레이아웃을 계산하는 데 사용되며, 화면에 렌더링하는 페인트 프로세스의 입력으로 처리된다.

렌더링 트리는 화면에 출력되지 않아도 될 노드, CSS를 통해 숨겨지는 노드(display: none 등)들을 렌더링 트리에서 생략한다.

2. transition 속성과 렌더링 트리

transition은 어떠한 상태에서 특정 이벤트가 트리거 되면 어떠한 속성의 변화가 일정기간에 걸쳐서 일어나도록 한다. 하지만 display:none 상태에서 동적으로 클래스가 display:block으로 변경된다면 렌더링트리에 없다가 추가 되는 것이기 때문에 transition의 첫 시작점이 존재하지 않는다. 따라서 시각적으로 transition이 동작하지 않는 것 처럼 보이는 것이다.

참고한 블로그 : 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