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.
Obsługa przeglądarek
- 107
- 107
- 66
- 16
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ługi0
do1
? To interpolacja numeryczna. - Przenieść usługę
background-color
z usługiwhite
doblack
? 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
.