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

CSS3 전환이 표시 속성과 작동하지 않습니다

CSS에서 표시 속성은 요소 표시 여부를 정의합니다. 요소가 표시: 없음으로 설정되면 문서 흐름에서 제거됩니다. 즉, 공간을 차지하지 않으며 표시되지 않습니다. 이로 인해 CSS 전환을 사용하여 디스플레이: 없음으로 요소의 표시 또는 사라짐에 애니메이션을 적용할 수 없습니다.

숨겨진 요소에 대해 부드러운 페이드인 효과를 얻으려면 디스플레이 속성을 사용하면 안 됩니다. 대신 불투명도 속성을 사용하여 요소의 투명도를 변경할 수 있습니다. 다음 CSS 코드는 불투명도 속성을 사용하여 페이드인 효과를 생성하는 방법을 보여줍니다.

#header #button:hover .content {
  opacity: 1;
  transition: opacity 0.3s ease 0.15s; /* Vendor prefixes omitted for brevity. */
}

#header #button .content {
  opacity:0;
}

이 코드에서 #header #button 요소가 다음인 경우 숨겨진 요소의 불투명도는 0으로 설정됩니다. 맴돌지 않았습니다. #header #button 요소 위에 마우스를 올리면 숨겨진 요소의 불투명도가 1로 설정되어 부드러운 페이드인 효과로 드러납니다.

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