CSS 가시성 전환이 불투명도처럼 작동하지 않는 이유는 무엇입니까?

CSS 가시성에 대한 전환 효과

문제 소개

전환 효과는 CSS에서 부드러운 애니메이션을 만들기 위해 일반적으로 사용됩니다. 그러나 가시성과 같은 특정 속성을 전환할 때 문제가 발생합니다. 이 상황에서는 전환이 예상대로 작동하지 않는 것 같고 불투명도와 같은 다른 속성과 동작이 다릅니다.

가시성 대 불투명도 전환

In 제공된 예에서는 요소의 가시성과 불투명도에 전환이 적용됩니다.

가시성의 경우:

#inner {
  visibility: hidden;
  transition: visibility 1000ms;
}
#outer:hover #inner {
  visibility: visible;
}

불투명성의 경우:

#inner1 {
  opacity: 0;
  transition: opacity 1000ms;
}
#outer1:hover #inner1 {
  opacity: 1;
}

전환 효과 불투명도에 대해서는 예상대로 작동하지만 가시성에 대해서는 트리거되지 않습니다. 전환 기간을 1000ms로 설정했음에도 불구하고 애니메이션이 관찰되지 않습니다.

설명

관찰된 동작은 버그가 아니라 전환 효과가 구현되는 방식의 결과입니다. CSS. 전환은 두 값 사이의 키프레임을 계산하고 중간 상태에 애니메이션을 적용하는 방식으로 작동합니다. 그러나 가시성은 이진 값(가시 또는 숨김)이므로 이러한 상태 사이의 숫자 값을 허용하지 않습니다.

따라서 가시성 속성이 숨김에서 전환되기 전의 전환 기간은 지연으로 해석됩니다. 마우스를 올리면 표시됩니다(또는 그 반대로). 이 지연은 전환 효과를 모방하지만 불투명도 전환과 같은 의미에서 실제 애니메이션은 아닙니다.

전환 가능 속성

부드러운 애니메이션을 보장하려면 전환이 다음과 같아야 합니다. 숫자 값으로 명확한 시작 및 끝 값을 갖는 순서 속성에 적용됩니다. 전환 가능한 속성 목록은 다음 링크에서 확인할 수 있습니다:

[전환 가능한 속성 참조 링크]

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