내 CSS 전환이 CSS 그리드 레이아웃과 작동하지 않는 이유는 무엇입니까?

CSS 그리드 레이아웃에서 CSS 전환 사용

문제:

CSS 그리드 레이아웃을 사용하여 고정 헤더 구현 , 아래로 스크롤할 때 헤더가 줄어들기 때문에 사용자는 원활한 전환 효과를 얻기 위해 애쓰고 있습니다. .wrapper 클래스에 CSS 전환을 추가해도 애니메이션이 발생하지 않습니다.

분석:

CSS 그리드 레이아웃 사양에 따르면 전환은 그리드에서 작동해야 합니다. -템플릿-열 및 그리드-템플릿-행 속성. 그러나 제공된 예에서는 전환이 적용되지 않습니다.

해결책:

현재 그리드 속성의 CSS 전환은 Firefox에서만 지원됩니다. 원하는 애니메이션을 활성화하려면 지원되는 방법을 사용하도록 레이아웃을 수정해야 합니다. 한 가지 대안은 Grid 대신 Flexbox를 사용하는 것입니다.

수정 사항을 보여주는 업데이트된 코드 조각은 다음과 같습니다.

.wrapper {
  display: flex;
  height: 100vh;
  transition: all 0.5s;
}

.wrapper.tiny {
  height: 50vh;
}

위 내용은 내 CSS 전환이 CSS 그리드 레이아웃과 작동하지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!