CSS 그리드 레이아웃 속성에 애니메이션을 적용할 수 있나요?

CSS 그리드 레이아웃 속성 애니메이션

전환이 그리드 템플릿 열 및 그리드 템플릿에 적용되어야 함을 나타내는 CSS 그리드 레이아웃 사양에도 불구하고 -rows, 현재 대부분의 브라우저에서는 작동하지 않습니다.

현재 구현:

Firefox는 애니메이션 그리드 속성을 지원하며 여기에서 예시를 제공합니다:
https://codepen.io/matuzo/post/animating-css-grid-layout-properties

주의 사항:

그리드 구조는 동안 변경할 수 없습니다. 행 및 열 차원에 애니메이션을 적용합니다. 예를 들어 행을 추가하거나 제거하면 애니메이션이 중단됩니다.

테스트 코드:

다음 테스트를 고려하세요.

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>
  <!-- Additional items -->
</grid-container>

참고: 이 예제의 테스트 코드는 적절한 표시를 위해 HTML 주석으로 묶여 있습니다.

위 내용은 CSS 그리드 레이아웃 속성에 애니메이션을 적용할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!