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

CSS3 전환이 디스플레이 속성과 작동하지 않음

문제 설명:

마우스를 올리면 숨겨진 div가 페이드 인되는 CSS 전환이 원하는 결과를 얻지 못합니다. 완화 전환은 관찰되지 않습니다.

코드 분석:

제공된 코드를 조사한 결과 문제는 디스플레이 속성 사용에서 비롯된 것이 분명합니다. CSS의 표시 속성은 페이지에 있는 요소의 존재 여부와 가시성을 제어합니다. 없음으로 설정하면 숨겨진 div의 초기 상태이므로 해당 요소가 페이지의 문서 흐름에서 제거되어 효과적으로 보이지 않게 렌더링됩니다.

전환 적용 가능성:

CSS 전환은 요소의 형상이나 모양에 영향을 미치는 속성에만 적용됩니다. 표시 속성의 경우 형상이나 모양을 변경하는 대신 요소의 가시성 상태를 전환합니다. 결과적으로 디스플레이 속성에 전환을 적용할 수 없습니다.

불투명도를 사용하는 대체 솔루션:

디스플레이 속성을 사용하는 대신 불투명도 속성을 사용하여 원하는 페이드인 효과. 불투명도는 요소의 투명도를 제어하여 불투명도를 0에서 1까지 조정하여 부드럽게 페이드 인되도록 합니다.

업데이트된 CSS 코드:

다음 업데이트된 CSS 코드 불투명도 속성을 사용하여 부드러운 페이드인 전환을 만듭니다.

#header #button:hover > .content {
    opacity: 1;
    height: 150px;
    padding: 8px;    
}

#header #button .content {
    opacity: 0;
    height: 0;
    padding: 0 8px;
    overflow: hidden;
    transition: all .3s ease .15s;
}

불투명 기반 전환의 장점:

• 세밀한 제어가 가능합니다. 불투명도 값을 조정하여 페이드인 효과를 오버합니다.
• 문서 흐름에서 요소를 제거하는 표시와 달리 전환 중에 요소의 위치와 크기를 유지합니다.
• CSS 전환과 호환되며, 부드럽고 애니메이션적인 변환이 가능합니다.

결론:

CSS 전환은 디스플레이 속성에 적용할 수 없지만 불투명도 속성은 다음과 같은 실행 가능하고 효과적인 솔루션을 제공합니다. 마우스를 올리면 부드러운 페이드인 효과가 생성됩니다. 불투명도 값을 조정하면 숨겨진 요소의 가시성과 모양을 제어하여 원하는 전환을 원활하게 달성할 수 있습니다.

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