CSS 전환은 모든 브라우저의 `grid-template-columns` 및 `grid-template-rows`에서 작동합니까?

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

코드 조각에서 CSS 전환을 올바르게 구현하여 래퍼 높이에 애니메이션을 적용했습니다. 클래스(그리드-템플릿-행). 그러나 CSS 그리드 속성에 대한 전환은 아직 모든 브라우저에서 지원되지 않습니다.

현재 사양에서는 전환이 그리드 템플릿 열 및 그리드 템플릿 행에서 작동해야 한다고 명시하고 있습니다. 속성의 값. 그러나 일부 브라우저에서는 이러한 속성에 대한 전환이 작동하지 않을 수 있습니다.

그리드-템플릿-열 및 그리드-템플릿-행에 대한 전환을 허용하는 업데이트된 구현이 있습니다. 이 구현은 현재 Firefox에서만 지원됩니다.

테스트 코드:

그리드 템플릿 열 및 그리드 템플릿 행의 전환이 브라우저에서 작동하는지 테스트하려면 , 다음 코드를 사용할 수 있습니다.

grid-container {
  display: inline-grid;
  grid-template-columns: 100px 20vw 200px;
  grid-template-rows: repeat(2, 100px);
  background-color: black;
  height: 230px;
  transition: 2s;
}

grid-container:hover {
  grid-template-columns: 50px 10vw 100px;
  grid-template-rows: repeat(2, 50px);
  background-color: red;
  height: 130px;
  transition: 2s;
}

grid-item {
  background-color: lightgreen;
}

<grid-container>
  <grid-item></grid-item>
  <grid-item></grid-item>
  <grid-item></grid-item>
  <grid-item></grid-item>
  <grid-item></grid-item>
  <grid-item></grid-item>
</grid-container>

호버링 시 그리드의 높이와 너비가 부드럽게 변경되는 경우 Firefox의 컨테이너를 통해 브라우저에서 그리드 템플릿 열 및 그리드 템플릿 행에 대한 전환이 지원됩니다.

위 내용은 CSS 전환은 모든 브라우저의 `grid-template-columns` 및 `grid-template-rows`에서 작동합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!