[ css ]요소가 부드럽게 나타나고 사라지게 하려면 opacity를 쓰자

 

이전에 getBoundingClientRect()에 대해 포스팅에도 쓰였던 이미지다.

 

이번에는 버튼이나 헤더에 위치한 로고와 네비게이션바를 자세히 보면

스크롤을 내리고 올릴 때 부드럽게 사라지고 부드럽게 나타나는 것을 유심히 보자.

 

display: none 으로도 설정할 수 있지만 해당 요소가 레이아웃에서 완전히 제거되기 때문에

다른 요소가 해당 공간을 채우게 될 수도 있고 요소의 위치가 변경되기도 한다.

 

opacity 의 경우에는 여전히 레이아웃에 존재하면서 단지 보이지 않을 뿐이다.

 

마우스를 해당 요소의 위치에 가지고 가면 포인터가 보이는데,

보이게 하기 싫다면  pointer-events: none 으로 해주면 포인터가 표시되지 않는다.

 

해당요소의 공간을 사용하지 않으려면 visibility: hidden을 같이 쓰면 레이아웃에서 사라진다.

 

그리고 transition 속성으로 부드러운 애니메이션 효과를 줄 수 있다.

 

.arrow-up {
	visibility: hidden;
	opacity: 0;
	transition: all ease-in-out 300ms;
	cursor: pointer;
}

 

 

.arrow-up-visible {
	visibility: visible;
	opacity: 1;
}