CSS 전환이 모든 브라우저의 그리드 템플릿 속성에서 작동하지 않는 이유는 무엇입니까?

CSS 그리드 레이아웃의 전환 문제 해결

CSS 전환을 그리드 속성에 적용하여 부드러운 애니메이션을 구현할 수 있습니다. 그러나 전환이 올바르게 작동하려면 특정 조건이 충족되어야 합니다.

CSS 사양에 따르면 전환은 값을 변경하지 않고 값만 변경될 때 Grid-template-columns 및 Grid-template-rows 속성에서 작동해야 합니다. 규칙의 구조. 그러나 이는 현재 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 전환이 모든 브라우저의 그리드 템플릿 속성에서 작동하지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!