애니메이션 중에 스크롤 바를 숨기십시오

CSS는 여전히 자동 크기에 애니메이션 할 수 없습니다.

 . 드롭 다운 {
  전환 : 0.2S;
  높이 : 0;
}
.dropdown.open {
  /* 높이는 변하지 만 애니메이션되지 않습니다. */
  높이 : 자동;
}

자바 스크립트 트릭을 시도 할 수 있습니다. 얼마 전 Brandon Smith는 여기서 몇 가지 기술을 설명했습니다. 나는이 솔루션을 매우 간단하기 때문에이 솔루션을 생각하고 있습니다.

 . 드롭 다운 {
  전환 : 0.2S;
  Max-Height : 0;
}
.dropdown.open {
  /*? */
  최대 높이 : 400px;
}

이제 우리는이 마법의 400px를 가지고 있기 때문에 실제로 이상적이지 않습니다. 그러나이 방법이 작동하고 매우 간단하다는 사실은 제작 환경에서 항상 사용해 온 것이 매우 매력적입니다.

그러나 마법의 숫자만이 유일한 문제는 아닙니다. 또 다른 문제는 스크롤 바입니다.

우리가 max-height: 0; 우리는 또한 overflow: hidden; 닫을 때 드롭 다운 메뉴가 실제로 숨겨져 있는지 확인합니다. 드롭 다운 메뉴가 열리면 overflow: auto; 드롭 다운 메뉴의 자연스러운 높이가 확장 된 max-height 초과하면 실수로 컨텐츠를 차단할 수 없습니다. overflow: auto; 이 문제를 해결하지만 또 다른 문제를 소개합니다. 확장 중에 드롭 다운 메뉴는 최종 확장 높이에 필요하지 않더라도 확장 시간의 적어도 일부에 대한 스크롤 바를 표시합니다. 이것은 창피합니다!

CSS 팁은 구조하기 위해 온다.

우리는 여전히 overflow: auto; 확장 된 상태에서 - 우리는 애니메이션 중에 덮어 쓰기 만하면됩니다. 우리가 위대한 CSS 특이성 전투에서 배운 것처럼 @keyframes 활동 중에 무엇이든 커버 할 수있는 놀라운 능력을 가지고 있습니다. 애니메이션이 아니라이 숨겨진 스크롤 바 기능에 사용합시다.

 . 드롭 다운 {
  Max-Height : 0;
  오버플로 : 숨겨진;
  전환 : Max-Height 1.2s Ease-in-out;
}
.dropdown.open {
  오버플로 : 자동;
  최대 높이 : 400px;
  애니메이션 : 스크롤을 숨기고 1.2s를 거꾸로;
}
@keyframes hide-scroll {
  에서 {오버플로 : 숨겨진; }
}

그게 다야!

높이를 더 작은 값으로 조정하고 애니메이션 중에 스크롤 바를 보지 못하는 방법을 확인하십시오. 스크롤 바가 나타날 때 약간의 지터가 발생하지만 제 경우에는 거의 발생하지 않아 허용됩니다. 지터를 절대적으로 멈추고 싶다면 항상 (사용자 정의) 스크롤 바를 드롭 다운 메뉴에 적용해야하며 필요에 따라 애니메이션 중에 스크롤 바 스타일을 조정할 수 있습니다.

이 트릭에 대한 @keyframers의 Stephen Shaw 덕분에 감사합니다. Codepen에서 무언가를 작업하는 동안이 문제를 해결하도록 도와주었습니다. 우리는이 트릭을 Codepen Channel 비디오로 바꾸기로 결정하여 협업 모드를 보여 주었고 문제/솔루션을 찾는 데 사용했습니다.

위 내용은 애니메이션 중에 스크롤 바를 숨기십시오의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!