디스플레이가 없음으로 설정된 경우 CSS3 전환이 작동하지 않는 이유는 무엇입니까?

표시 속성과 함께 작동하지 않는 CSS3 전환

CSS에서 표시 속성은 요소의 표시 여부를 정의하는 데 중요한 역할을 합니다. . 반면에 전환은 시간이 지남에 따라 부드러운 시각적 변화를 허용합니다. 그러나 디스플레이가 없음으로 설정된 요소에 전환을 적용하려고 하면 예기치 않은 동작이 발생할 수 있습니다.

문제 해결

이 문제는 디스플레이의 특성에서 비롯됩니다. 재산. 요소의 표시가 없음으로 설정되면 페이지에 없었던 것처럼 페이지에서 제거됩니다. 따라서 부분적으로 표시되거나 전환될 수 없습니다.

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

호버에서 원하는 페이딩 효과를 얻으려면 대신 불투명도 속성을 활용하는 것이 좋습니다. . 불투명도는 요소의 투명도를 제어하여 요소가 점진적으로 나타나거나 사라지도록 합니다.

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 전환 튜토리얼](https://www.w3schools.com/css/css3_transitions.asp)
• [CSS로 숨겨진 요소 처리 전환](https://css-tricks.com/transitions-with-hidden-elements/)
• [스택 오버플로에 대한 유사한 주제](https://stackoverflow.com/questions/30130725/css- 애니메이션-표시 시 표시되지 않음-없음)

위 내용은 디스플레이가 없음으로 설정된 경우 CSS3 전환이 작동하지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!