CSS 그리드 애니메이션 (예제 방법)

모든 주요 브라우저에서 애니메이션에 CSS 그리드의 및 속성을 사용할 수 있습니다! 실제로 CSS 그리드는 CSS 그리드 레이아웃 모듈 레벨 1 사양에 내장되어 있기 때문에 오랫동안 애니메이션을 지원해 왔습니다.

그러나 최근까지 3 개의 주요 브라우저는이 메쉬 속성의 애니메이션을 완전히 지원합니다. 창의성에 영감을 줄 몇 가지 예를 살펴 보겠습니다! grid-template-rows 카탈로그 grid-template-columns 카탈로그 예 1 : 사이드 바 를 확장하십시오 예제 2 : 패널을 확장 예제 3 : 행과 열을 추가하십시오 더 많은 예

예 1 : 사이드 바 를 확장하십시오 우선, 이것은 우리가 논의 할 것입니다 : 간단한 2 열 그리드. 이전에는 애니메이션과 전환이 지원되지 않기 때문에 CSS 그리드로 구축하지 않았을 것입니다. 그러나 왼쪽 열 (아마도 사이드 바 탐색)이 호버에서 확장되기를 원한다면 어떻게해야합니까? 이제 가능합니다.

나는 당신이 생각하는 것을 알고 있습니다. "애니메이션 CSS 속성? 케이크 한 조각, 나는 그것을 몇 년 동안 해왔습니다! 그러나 특정 사용 사례를 시도 할 때 흥미로운 장애물이 발생했습니다.

그래서 우리는 메쉬 자체를 변환하려고합니다 (특히 예제에서 클래스에서 세트). 그러나 왼쪽 열 ()은 pseudo 클래스가 필요한 선택기입니다. JavaScript는이 문제를 쉽게 해결할 수 있지만 감사합니다. 필요하지 않습니다. CSS만으로 구현할 수 있습니다.

HTML로 시작하여 전체 프로세스를 단계별로 설명해 봅시다. 실제로 매우 표준입니다 ... 두 개의 열이있는 그리드입니다.

장식 CSS를 제쳐두고, 먼저 부모 컨테이너 ()에
• 를 설정해야합니다.
• 다음으로
속성을 ​​사용하여 두 열을 정의하고 크기를 조정할 수 있습니다. 우리는 왼쪽 열을 매우 좁게 설정하고 호버링 할 때 나중에 너비를 증가시킵니다. 오른쪽의 열은
• 키워드 덕분에 나머지 공간을 차지합니다.
• 우리는 그것을 애니메이션하고 싶다는 것을 알고 있으므로, 상태 간의 변화가 매끄럽고 명백 할 수 있도록 애니메이션을 추가하는 동안 전환 효과를 추가합시다.
완료되었습니다! 나머지는 응용 프로그램 호버 상태입니다. 구체적으로, 우리는 왼쪽 열이 호버링 될 때 더 많은 공간을 차지하도록 속성을 ​​무시할 것입니다.

CSS 그리드는 이제 애니메이션과 전환을 지원하지만 이 혼자서는 그렇게 재미 있지 않습니다. 더 흥미로운 점은 우리가 비교적 새로운

pseudo 클래스를 사용하여 자식 요소 (

)가 호버링 될 때 부모 컨테이너 ()를 스타일링 할 수 있다는 것입니다.

<div class="grid">
  <div class="left"></div>
  <div class="right"></div>
</div>

는 단순한 영어로 다음과 같이 의미합니다. "

컨테이너가 라는 요소가 포함되어 있고 요소가 호버링되면 .grid 따라서 호버링 할 때 .left 열의 너비를 30%로 늘리겠습니다. 열은 남은 모든 공간을 계속 점유합니다. .grid 우리는 또한 개인 선호도에 따라 CSS 변수를 사용할 수 있습니다 (또는 프로젝트에서 이미 CSS 변수를 사용 할 수 있음) : :has().

CSS 그리드는 이제 애니메이션을 만들 수 있지만 9 줄의 CSS 코드 만으로이 특정 예제를 빌드 할 수 있다는 사실은 훨씬 놀랍습니다.

이것은 Olivia Ng의 또 다른 예입니다. 개념은 비슷하지만 내용을 포함합니다 (탐색 아이콘을 클릭하십시오) : 예제 2 : 패널을 확장 이 예제는 그리드 컨테이너 (열 폭)를 변환하고 개별 열 (배경색)을 변환합니다. 호버에 더 많은 콘텐츠를 제공하는 데 적합합니다. .left .right 함수가 때때로 잘못된 전환을 생성한다는 것을 기억할 가치가 있습니다. 그래서 각 열의 너비를 개별적으로 설정합니다 (즉, ).

예제 3 : 행과 열을 추가하십시오 이 예제는 열을 그리드에 애니메이션합니다. 그러나 당신은 그것을 추측했습니다 -이 상황에 대한 함정도 있습니다. 요구 사항은 "새"열을 숨길 수 없으며 (즉, ) CSS 그리드는 폭을 0fr로 설정할 때 그 존재를 인정해야한다는 것입니다.

.grid {
  display: grid;
}

3 열 그리드 -

의 경우 (예, 값이 0 인 경우에도 장치가 선언되어야합니다!)는 로 올바르게 변환되지만

는 그렇지 않습니다. 뒤늦게, 이것은 전환이 어떻게 작동하는지에 대한 우리의 이해를 감안할 때 실제로 완전히 합리적입니다.

.grid {
  display: grid;
  grid-template-columns: 48px auto;
}

이것은 Michelle Barker의 또 다른 예입니다. 같은 개념이지만 열이 있고 더 멋진 효과가 있습니다. 이 예제는 실제로 반응이 좋으므로 전체 화면 모드로 실행하십시오 (트릭은없고, 좋은 디자인 만).

더 많은 예

왜 그렇지 않습니까?

이 "애니메이션 몬드리안"은 Chrome Devrel에서 제작 한 애니메이션 CSS 그리드의 초기 개념 증명입니다.

및

키워드를 사용하여 앞에 볼 수있는 레이아웃을 만들고 CSS 애니메이션을 사용하여 및

를 애니메이션하십시오. 보이는 것만 큼 복잡하지 않습니다!

동일한 개념이지만 Michelle Barker의 멋진 효과. 좋은 로딩 스피너를 만들 수 있습니까?

마지막으로 향수를 검토합니다 (I 'm Age Here), Andrew Harvard는 그리드와는 다르지 않은 애니메이션 CSS 그리드를 만듭니다. 동일 - 동일한 개념 - 다른 그리드 항목을 볼 수 없습니다. 그러나 걱정하지 마십시오.

위 내용은 CSS 그리드 애니메이션 (예제 방법)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!