Animowane układy siatki CSS

Bramus

W siatce CSS właściwości grid-template-columns i grid-template-rows umożliwiają definiowanie nazw linii oraz śledzenie rozmiarów kolumn i wierszy siatki. Obsługa interpolacji tych właściwości umożliwia płynne przechodzenie między stanami układów siatki zamiast ich przełączania w połowie animacji lub przejścia.

Interpolacja wartości w CSS

W CSS możesz płynnie przechodzić od jednej wartości do drugiej za pomocą właściwości transition.

#target {
  opacity: 0.5;
  transition: opacity ease-in-out 0.25s;
}

#target:hover {
  opacity: 1;
}

Silnik renderowania automatycznie wykryje typ wartości elementu docelowego i użyje tych informacji, aby płynnie przejść do nowej wartości.

Na przykład:

• Czy opacity przechodzi z 0 na 1? To jest interpolacja numeryczna.
• Czy background-color przechodzi z white na black? Przejdź od koloru źródłowego do docelowego.
• Przechodzisz na width? Interpoluj liczbowo, w razie potrzeby konwertując jednostki.

To samo dotyczy animacji CSS, w których przeglądarka wykonuje interpolację wartości między klatkami kluczowymi.

Animowanie elementów grid-template-columns i grid-template-rows

Układy siatki mogą też płynnie przechodzić między stanami, zamiast zatrzymywać się w połowie animacji lub przejścia.

W tym pokazie demonstracyjnym siatka zawiera kilka awatarów. Aby zaoszczędzić miejsce, awatary są układane jeden na drugim, a ich szerokość jest ograniczona za pomocą grid-template-columns. Po najechaniu kursorem na każdą kolumnę jest ona powiększana.

.avatars {
  display: grid;
  gap: 0.35em;

  grid-auto-flow: column;
  grid-template-columns: repeat(4, 2em);
  transition: all ease-in-out 0.25s;
}

.avatars:hover {
  grid-template-columns: repeat(4, 4em);
}

Dzięki właściwości transition siatka płynnie interpoluje wartości.

Efekt dotyczy też animacji, które zmieniają wartości grid-template-columns lub grid-template-rows.