CSS 그리드는 자동 높이 전환을 수행 할 수 있습니다

CSS 팁! Nelson Menezes는 새로운 접근 방식 (현재 Firefox에서만 작동)을 발견했습니다.

CSS는 자동 크기에 애니메이션 할 수 없다는 것을 알고있을 것입니다. 제로 애니메이션에서 "수요 크기"에 이르기까지 많은 경우에 매우 유용합니다. 우리는 사용 가능한 기술을 문서화했습니다. 그들은 다음으로 끓습니다.

• max-height 필요한 것보다 더 큰 값으로 애니메이션하므로 시간이 부정확하고 매끄럽지 않습니다.
• JavaScript를 사용하여 최종 크기를 측정하고 애니메이션 IT를 사용하십시오. 즉, JavaScript를 사용하십시오.

넬슨의 기술은 시각적 인 어색함을 가진 일종의 전환 기반 접근법도 아닙니다. 이 기술 핵심은 CSS 그리드를 사용합니다 ...

 .expander {
  디스플레이 : 그리드;
  그리드-템플릿 열 : 0fr;
  전환 : 그리드-템플릿-로스 1s;
}

.expander.expanded {
  그리드-템플릿 열 : 1fr;
}

놀랍게도 Firefox에서는 해당 영역 내의 컨텐츠 사이의 전환이 0에서 컨텐츠의 자연 높이로 전환됩니다. 접근성을 유지하면서 오버플로를 숨기고 가시성을 숨기는 것과 같은 약간의 추가 작업을 수행하십시오.

이것은 굉장합니다. 이 문제에주의를 기울이면 Chrome도 채택 할 것입니다. 물론 자동 높이 전환이 작동하기 시작하면 더 나을 것입니다. 나는 이것이 완전히 불가능하다고 상상할 수 없다.

위 내용은 CSS 그리드는 자동 높이 전환을 수행 할 수 있습니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!