CSS 전환이 가시성 속성과 함께 작동하지 않는 이유는 무엇입니까?

CSS 전환 및 가시성: 기만적인 환상

CSS에서 전환을 사용하면 속성 상태 간에 부드러운 애니메이션이 가능합니다. 그러나 가시성 전환을 시도할 때 당황스러운 문제가 발생하여 사용자는 이것이 버그인지 궁금해합니다.

가시성 전환 사례

다음 코드를 고려해보세요.

<code class="css">#inner {
    visibility: hidden;
    transition: visibility 1000ms;
}

#outer:hover #inner {
    visibility: visible;
}</code>

이 코드는 ID가 "outer"인 요소 위로 마우스를 가져가면 ID가 "inner"인 요소를 표시하는 것을 목표로 합니다. 그러나 실망스럽게도 전환이 예상대로 작동하지 않습니다. 원활한 전환 대신 지정된 전환 기간과 일치하는 지연 후 가시성이 갑자기 전환됩니다.

범인

근본 원인은 가시성의 특성에 있습니다. 재산. 연속 값(0-1)을 나타내는 불투명도와 같은 속성과 달리 가시성은 이진 상태(표시 또는 숨김)로 존재합니다. 보간할 중간 상태가 없기 때문에 이러한 근본적인 차이는 전환을 방해합니다.

전환 가능한 속성

전환은 두 숫자 값 사이의 키프레임 계산에 의존합니다. 불투명도의 경우 전환이 0과 1 사이에서 부드럽게 페이드됩니다. 그러나 가시성에서는 전환에 보간하는 데 필요한 수치 범위가 부족합니다.

결론

동안 처음에는 버그와 유사한 이 동작은 CSS 전환의 고유한 제한 사항입니다. 계산 가능한 값이 있는 속성만 원활하게 애니메이션화할 수 있습니다. 가시성과 같은 이진 속성의 경우 급격한 상태 변경은 불가피합니다.

위 내용은 CSS 전환이 가시성 속성과 함께 작동하지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!