현재 CSS ‘메가 드롭 다운’메뉴를 디자인하고 있습니다. 기본적으로 일반적인 CSS 전용 드롭 다운 메뉴이지만 다른 유형의 내용이 포함되어 있습니다.

지금이 순간, 이 세 전환은 ‘디스플레이’속성에 적용되지 않는 CSS 표시 , 즉, 당신은에서 전환의 모든 종류의 할 수 없습니다 display: none에 display: block(또는 조합).

누군가가 최상위 메뉴 항목 중 하나를 가리킬 때 위 예제의 2 단계 메뉴가 ‘페이드 인’하는 방법이 있습니까?

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속성 을 잊지 마십시오 .)

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

답변

이 기능을 사용하려면 다른 방법으로 요소를 숨겨야합니다.

나는 <div>s를 절대적 으로 배치 하고 숨겨진 것을로 설정 하여 효과를 달성 했습니다 opacity: 0.

display속성을에서 (으) none로 전환해도 block다른 요소에 대한 전환이 발생하지 않습니다.

이 문제를 해결하려면 항상 요소를 허용 display: block하지만 다음 방법 중 하나를 조정하여 요소를 숨기십시오.

(가) 설정 height에 0.
(가) 설정 opacity에 0.
요소를 다른 요소의 프레임 외부에 배치 overflow: hidden .

더 많은 솔루션이있을 수 있지만 요소를 토글하면 전환을 수행 할 수 없습니다 display: none . 예를 들어, 다음과 같은 것을 시도 할 수 있습니다.

div {
    display: none;
    transition: opacity 1s ease-out;
    opacity: 0;
}
div.active {
    opacity: 1;
    display: block;
}

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

이 때문에 항상 요소를 유지해야 display: block하지만 다음과 같이하면 해결할 수 있습니다.

div {
    transition: opacity 1s ease-out;
    opacity: 0;
    height: 0;
    overflow: hidden;
}
div.active {
    opacity: 1;
    height: auto;
}

답변

이 게시물을 게시 할 때 display속성 을 변경하려고하면 모든 주요 브라우저에서 CSS 전환이 비활성화 되지만 CSS 애니메이션은 여전히 잘 작동하므로 해결 방법으로 사용할 수 있습니다.

예제 코드 (따라서 메뉴에 적용 할 수 있음) 데모 :

스타일 시트에 다음 CSS를 추가하십시오.

@-webkit-keyframes fadeIn {
    from { opacity: 0; }
      to { opacity: 1; }
}
@keyframes fadeIn {
    from { opacity: 0; }
      to { opacity: 1; }
}

그런 다음 fadeIn부모 호버의 자식에 애니메이션을 적용하십시오 (물론 set display: block).

.parent:hover .child {
    display: block;
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s;
}

2019 업데이트-페이드 아웃을 지원하는 방법 :

(일부 JavaScript 코드가 필요합니다)

// We need to keep track of faded in elements so we can apply fade out later in CSS
document.addEventListener('animationstart', function (e) {
  if (e.animationName === 'fade-in') {
      e.target.classList.add('did-fade-in');
  }
});

document.addEventListener('animationend', function (e) {
  if (e.animationName === 'fade-out') {
      e.target.classList.remove('did-fade-in');
   }
});

div {
    border: 5px solid;
    padding: 10px;
}

div:hover {
    border-color: red;
}

.parent .child {
  display: none;
}

.parent:hover .child {
  display: block;
  animation: fade-in 1s;
}

.parent:not(:hover) .child.did-fade-in {
  display: block;
  animation: fade-out 1s;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

<div class="parent">
    Parent
    <div class="child">
        Child
    </div>
</div>

스 니펫 확장

답변

나는 것으로 의심되는 이유 전환이 경우 사용할 수 있음을 display실제로 수행 표시 어떤 변화 때문에이다. 부드럽게 애니메이션 될 수있는 것은 변경 하지 않습니다 .

display: none;그리고 visibility: hidden;두 가지 완전히 다른 것입니다.
둘 다 요소를 보이지 않게 만드는 효과가 있지만 visibility: hidden;레이아웃에서 여전히 렌더링되지만 눈에 띄게 표시 되지는 않습니다 .
숨겨진 요소는 여전히 공간을 차지하며 여전히 인라인으로 또는 블록 또는 블록 인라인 또는 테이블 display로 렌더링 되거나 요소가 렌더링하도록 지시 한대로 공간을 차지합니다.
다른 요소는 해당 공간을 차지하도록 자동으로 이동 하지 않습니다 . 숨겨진 요소는 실제 픽셀을 출력으로 렌더링하지 않습니다.

display: none반면에 실제로 는 요소가 완전히 렌더링 되는 것을 방지 합니다 .
그것은 차지하지 않는 어떤 레이아웃 공간.
이 요소가 차지하는 공간의 일부 또는 전부를 차지한 다른 요소는 이제 해당 요소 가 전혀 존재하지 않는 것처럼 해당 공간을 차지하도록 조정됩니다 .

display또 다른 시각적 속성이 아닙니다.
이 요소의 전체 렌더링 모드, 설정 등의 여부로의 block, inline, inline-block, table, table-row, table-cell, list-item, 또는 무엇이든!
그 각각은 매우 다른 레이아웃 파급 효과를 가지고 있고,이 애니메이션에 더 합리적인 방법이 될 수 없습니다 또는 부드럽게 (에서 원활한 전환 상상하는 시도를 전환 할 block로 inline또는 그 반대의 예를 들어!).

이 전환은 불가능 이유 인 경우의 표시 변경 (변화가 또는에서 경우에도 none– none!, 그것은 수단이없는 전혀 렌더링하는 것이 자신의 요소 렌더링 모드는 단지 투명의되지 않음).

답변

CSS에 존재하지 않는 콜백 대신 transition-delay속성 을 사용할 수 있습니다 .

#selector {
    overflow: hidden; // Hide the element content, while height = 0
    height: 0; opacity: 0;
    transition: height 0ms 400ms, opacity 400ms 0ms;
}
#selector.visible {
    height: auto; opacity: 1;
    transition: height 0ms 0ms, opacity 600ms 0ms;
}

무슨 일이야?

언제 visible 클래스 추가 둘 모두 height와 opacity(0 MS) 지연없이 애니메이션을 시작하지만 height(당량 완전한 애니메이션 0 MS 소요 display: block)과 opacity600 밀리 초 걸린다.
경우 visible클래스가 제거된다 opacity(당량의 초기 값으로 복원 (0, MS가 400 밀리 초 시간 지연)의 애니메이션을 시작하고, 높이가 400 밀리 초 만 후 즉시 (0 밀리 초)을 대기 display: none애니메이션 콜백하여).

이 방법은을 사용하는 방법보다 낫습니다 visibility. 이러한 경우 요소가 여전히 페이지의 공간을 차지하므로 항상 적합하지는 않습니다.

더 많은 예는 이 기사 를 참조 하십시오 .

답변

display 전환이 작동하는 속성 중 하나가 아닙니다.

전환을 적용 할 수있는 CSS 속성 목록은 애니메이션 가능 CSS 속성 을 참조하십시오 . 보간 방법 은 CSS 값 및 단위 모듈 레벨 4, 값 결합 : 보간, 덧셈 및 누적 을 참조하십시오.

CSS 3까지는 9.1 에 나열되었습니다 . CSS의 속성 (경고 팝업을 닫으십시오)

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

마지막 으로이 작업을 수행 할 max-height때 애니메이션 대신 사용할 수있는 속성 인 대신 사용 했지만 약간의 해킹이 있었지만 작동하지는 않았지만 복잡한 페이지 또는 저가형 모바일 사용자에게는 매우 위험 할 수 있습니다 장치.

답변

이제 블록 특성에 사용자 정의 애니메이션을 추가 할 수 있습니다.

@keyframes showNav {
  from {opacity: 0;}
  to {opacity: 1;}
}
.subnav-is-opened .main-nav__secondary-nav {
  display: block;
  animation: showNav 250ms ease-in-out both;
}

데모

이 데모에서는 하위 메뉴가에서 display:none로 변경되어 display:block여전히 페이드로 관리됩니다.