Animowane układy siatki CSS

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

Bramus

Interpolacja wartości w CSS

W kodzie CSS możesz płynnie przenosić właściwości między wartościami za pomocą właściwości transition.

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

#target:hover {
  opacity: 1;
}

Mechanizm renderowania automatycznie wykryje typ wartości docelowej właściwości i użyje tych informacji, aby płynnie przejść na nową wartość.

Na przykład:

• Przenieść usługę opacity z usługi 0 do 1? To interpolacja numeryczna.
• Przenieść usługę background-color z usługi white do black? Zanikanie między kolorami źródłowymi i docelowymi.
• Przenosisz konto width? Jeśli to konieczne, dokonaj interpolacji liczbowej, konwertując jednostki.

To samo dotyczy animacji CSS, gdzie przeglądarka określa wartości interpolacji między klatkami kluczowymi.

Interpolacja grid-template-columns i grid-template-rows

Dzięki współpracy z zespołem Microsoftu Chrome (od wersji 107) może interpolować wartości grid-template-columns i grid-template-rows.

Układy siatki mogą płynnie przechodzić między stanami, zamiast przyciągać je w połowie animacji lub przejścia.

W prezentacji pod siatką wyświetla się kilka awatarów. Aby zaoszczędzić miejsce, awatary są ułożone jeden na drugim, ograniczając szerokość każdej kolumny za pomocą funkcji grid-template-columns. Po najechaniu kursorem każda kolumna otrzymuje więcej miejsca.

.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);
}

Gdy zastosujesz właściwość transition, siatka płynnie interpoluje między wartościami.

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

Część serii Nowo interoperacyjnie