CSS 표시 속성의 변환

Question

<p>저는 현재 CSS "메가드롭다운" 메뉴를 디자인하고 있습니다. 기본적으로 일반 순수 CSS 드롭다운이지만 다양한 콘텐츠 유형이 포함되어 있습니다. </p> <p>현재 <strong>CSS 3 전환은 'display' 속성과 함께 작동하지 않는 것으로 보입니다</strong>. 즉, <code>display: none< <코드>디스플레이: 블록</코드>(또는 임의의 조합). </code></p><code> <p>위의 예에서 누군가가 최상위 메뉴 항목 중 하나 위로 마우스를 가져갈 때 두 번째 수준 메뉴가 "페이드 인"되도록 하는 방법이 있습니까? </p> <p><code>visibility:</code> 속성에 변환을 사용할 수 있다는 것을 알고 있지만 이를 효율적으로 사용하는 방법은 없습니다. </p> <p>나도 높이를 사용해 보았으나 비참하게 실패했습니다. </p> <p>JavaScript를 사용하면 쉽다는 것도 알지만 CSS만 사용해도 도전해보고 싶은데 제 능력이 좀 부족한 것 같아요.

Answer 1

요소가 작동하게 하려면 다른 방법으로 요소를 숨겨야 합니다.

두 가지를 결합하여 이 효과를 얻었습니다

绝对定位并将隐藏的设置为 opacity: 0.

display 属性从 none 切换为 block을 교체하면 다른 요소의 변형이 발생하지 않습니다.

이 문제를 해결하려면 항상 요소를 display: block로 허용하되 다음 중 하나를 조정하여 요소를 숨기세요.

1. will高度设置为0.
2. will不透明度设置为0.
3. 이 요소를 overflow:hidden 요소가 있는 다른 프레임 외부에 배치하세요.

더 많은 해결 방법이 있을 수 있지만 요소를 display: none로 전환하면 변환을 수행할 수 없습니다. 예를 들어 다음과 같이 시도해 볼 수 있습니다.

으아아아

하지만 이것은 작동하지 않습니다. 내 경험상, 나는 이것이 아무 것도 하지 않는다는 것을 발견했습니다.

따라서 항상 요소를 보존해야 합니다 display: block. 하지만 다음을 수행하여 문제를 해결할 수 있습니다.

으아아아

Answer 2

두 개 이상의 전환을 연결할 수 있으며, visibility이번에는 유용할 것입니다.

으아악 으아악