CSS 표시 속성의 전환

질문 : CSS 표시 속성의 전환

---

저는 현재 CSS '메가 드롭 다운'메뉴를 디자인하고 있습니다. 기본적으로 일반 CSS 전용 드롭 다운 메뉴이지만 다른 유형의 콘텐츠를 포함하는 메뉴입니다.

현재 CSS 3 전환은 'display'속성에 적용되지 않는 것으로 보입니다 display: none 에서 display: block (또는 어떤 조합)으로도 전환 할 수 없습니다.

누군가가 최상위 메뉴 항목 중 하나를 가리킬 때 위 예제의 두 번째 계층 메뉴가 '페이드 인'하는 방법이 있습니까?

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

나는 또한 높이를 사용해 보았지만 비참하게 실패했습니다.

JavaScript를 사용하여이 작업을 수행하는 것이 사소한 일이라는 것도 알고 있지만 CSS 만 사용하도록 스스로 도전하고 싶었고 조금 짧게 생각하고 있습니다.

답변

---

두 개 이상의 전환을 연결할 수 있으며 visibility 이 편리합니다.

 

div {
  border: 1px solid #eee;
}
div > ul {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.5s linear;
}
div:hover > ul {
  visibility: visible;
  opacity: 1;
}

<div>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
</div>

transition 속성에 대한 공급 업체 접두사를 잊지 마십시오.)

자세한 내용은 이 기사에 있습니다.

출처 : https://stackoverflow.com/questions/3331353/transitions-on-the-css-display-property