CSS 표시 속성의 그라데이션 효과

Question

저는 현재 CSS "슈퍼 드롭다운"을 디자인하고 있습니다. 기본적으로는 일반 순수 CSS 드롭다운이지만 그 안에 다양한 유형의 콘텐츠가 있습니다.

현재 CSS 3 전환 효과는 "display" 속성에 적용되지 않는 것 같습니다 즉, display: none표시: 블록

위의 예에서 누군가 상단 메뉴 항목 위로 마우스를 가져갈 때 두 번째 수준 메뉴가 "페이드 인"되도록 하는 방법이 있습니까?

visibility: 속성에 전환 효과를 사용할 수 있다는 것을 알고 있지만 이를 효과적으로 사용하는 방법을 찾을 수 없습니다.

나도 높이를 사용해 보았지만 결과는 형편없었습니다.

이것은 JavaScript를 사용하여 쉽게 달성할 수 있다는 것도 알고 있지만 CSS만 사용해도 도전해보고 싶었지만 제 수준에서 조금 벗어난 것 같습니다.

Answer 1

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

두 가지를 결합하여 효과를 얻었습니다<div> 都设置为绝对定位，并将隐藏的一个设置为 opacity: 0.

display 属性从 none 切换到 block을 추가하면 다른 요소에 대한 전환 효과가 발생하지 않습니다.

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

1. 할 것이다 height 设置为 0.
2. 할 것이다 opacity 设置为 0.
3. overflow: hidden를 사용하여 다른 요소의 프레임 외부에 요소를 배치합니다.

더 많은 솔루션이 있을 수 있지만 요소를 display: none로 전환하면 전환을 수행할 수 없습니다. 예를 들어 다음과 유사한 것을 시도해 볼 수 있습니다.

으아악

그러나 이것은 작동하지 않습니다. 내 경험상 이것이 아무런 효과가 없다는 것을 알았습니다.

따라서 항상 요소의 display: block을 유지해야 합니다. 하지만 다음 방법으로 이 문제를 해결할 수 있습니다.

으아악

Answer 2

두 개 이상의 전환 효과를 연결할 수 있으며, visibility이 기능이 유용합니다.

으아악 으아악