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 przejścia między stanami w układach siatki zamiast ich łapania w połowie animacji lub przejścia.
Obsługa przeglądarek
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 z0
na1
? To jest interpolacja numeryczna. - Czy
background-color
przechodzi zwhite
nablack
? Przejdź od koloru źródłowego do docelowego. - Przechodzisz na
width
? Interpolacja numeryczna z konwersją jednostek w razie potrzeby.
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 siatki widać 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
.