Display 속성을 사용할 때 CSS3 전환이 작동하지 않는 이유는 무엇입니까?

표시 속성에서 CSS3 전환이 작동하지 않음

개요

이 문서에서는 표시 속성을 사용할 때 CSS 전환이 올바르게 작동하지 않는 문제를 다룹니다. 원하는 목표를 달성하기 위한 통찰력과 대체 솔루션을 제공합니다.

문제 설명

목표는 숨겨진 div가 상위 요소 위로 마우스를 가져갈 때 부드럽게 페이드 인되는 효과를 만드는 것입니다. 그러나 CSS 전환을 사용하여 이를 구현하려는 시도는 실패했으며 전환 없이 숨겨진 div만 표시되었습니다.

근본 원인

표시 속성이 설정된 요소에는 CSS 전환을 적용할 수 없습니다. 누구에게도. 이는 display: none이 문서 흐름에서 요소를 완전히 제거하여 어떤 효과에도 사용할 수 없기 때문입니다.

대체 솔루션

원하는 페이딩 효과를 얻으려면 불투명도 속성을 대신 활용할 수 있습니다. 디스플레이의. 숨겨진 div의 불투명도를 조작하면 마우스를 가져갈 때 점차적으로 드러날 수 있습니다.

업데이트된 CSS 코드는 다음과 같습니다.

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

#header #button .content {
    opacity:0;
    height: 0;
    padding: 0 8px;
    overflow: hidden;

    -webkit-transition: all .3s ease .15s;
    -moz-transition: all .3s ease .15s;
    -o-transition: all .3s ease .15s;
    -ms-transition: all .3s ease .15s;
    transition: all .3s ease .15s;
}

이 코드에서 숨겨진 div의 불투명도는 처음에는 0으로 설정되어 보이지 않게 됩니다. 상위 버튼 위에 마우스를 올리면 불투명도가 점차 1로 전환되어 부드러운 페이딩 효과로 div가 드러납니다.

결론

디스플레이 속성의 한계를 이해하고 대체 솔루션 구현 불투명도를 사용하면 마우스를 올리면 숨겨진 요소에 대해 원하는 페이드인 전환을 얻을 수 있습니다.

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