CSS 표시 속성의 변환

Question

저는 현재 CSS "메가 드롭다운" 메뉴를 디자인하고 있습니다. 기본적으로 일반 순수 CSS 드롭다운 메뉴이지만 다양한 콘텐츠 유형이 있습니다. 현재 CSS3 전환은 "display" 속성에서 작동하지 않는 것 같습니다. 즉, display:none에서 display:block(또는 다른 조합)으로 이동할 수 없습니다. 위의 예에서 누군가가 최상위 메뉴 항목 중 하나 위로 마우스를 가져갈 때 두 번째 수준 메뉴가 "페이드 인"되도록 하는 방법이 있습니까? visible: 속성에 변환을 사용할 수 있다는 것을 알고 있지만 이를 효율적으로 사용하는 방법이 생각나지 않습니다. 나도 시도했다

P粉701491897 · Answer

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

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

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

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

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


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


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

으아아아

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

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

으아아아

P粉071743732 · Answer

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

으아악 으아악