.a {
display: none;
transition: all 1s ease-in-out;
}
.a:hover {
display: block;
}
a에 hover 됐을 때 1초동안 쉽게 드갔다 나오듯이 부드럽게 나온다? 그런 것 없이 바로 빡! 하고 끝이다....
렌더링 될 때 HTML CSS를 파싱하여 DOM, CSSOM이 생기고 둘이 결합해서 렌더링 트리가 만들어진다.
display: none
은 css에서 숨겨진 노드라서 렌더링 트리에 없다.
즉!!!! transition의 시작이 없다!!!
위 코드에서 a는 hover 되는 순간 생기기 때문에 땋!!!나타나는 거다.
.a {
height: 0vh;
transition: all 1s ease-in-out;
}
.a:hover {
height: 30vh;
}
.a {
opacity: 0;
transition: all 1s ease-in-out;
}
.a:hover {
opacity: 1;
}
.a {
transform: scale(0);
transition: all 1s ease-in-out;
}
.a:hover {
transform: scale(1);
}
위 세 가지 방법은 ppt에서 보던 부드러운 효과를 줄 것이다!
.a {
opacity: 0;
pointer-events: none;
transition: all 1s ease-in-out;
}
.a:hover {
opacity: 1;
pointer-events: visible;
}
.a {
opacity: 0;
visibility: none;
transition: all 1s ease-in-out;
}
.a:hover {
opacity: 1;
visibility: visible;
}