Podcast o usługach porównywania cen – 044: Przejścia
Podczas interakcji z witryną możesz zauważyć, że wiele elementów zawiera parametr state. Na przykład menu mogą być otwarte lub zamknięte. Przyciski mogą zmienić kolor po najechaniu na nie kursorem. Elementy modalne pojawiają się i znikają.
Domyślnie CSS natychmiast zmienia styl tych stanów.
Przejścia CSS umożliwiają interpolację między stanem początkowym a docelowym elementu. Przejście między nimi poprawia wrażenia użytkownika, zapewniając wizualną wskazówkę, wsparcie oraz wskazówki dotyczące przyczyny i skutków interakcji.
Właściwości przejścia
Aby korzystać z przejść w CSS, możesz skorzystać z różnych właściwości przejścia lub skróconej właściwości transition
.
właściwość przejściowa
Właściwość transition-property
określa style, które mają zostać przeniesione.
.my-element {
transition-property: background-color;
}
transition-property
akceptuje co najmniej 1 nazwę właściwości CSS w postaci listy rozdzielonej przecinkami.
Opcjonalnie możesz użyć atrybutu transition-property: all
, aby wskazać, że każda usługa ma zostać przeniesiona.
czas przejścia
Właściwość transition-duration
służy do określania czasu trwania przejścia.
transition-duration
akceptuje jednostki czasu podawane w sekundach (s
) lub w milisekundach (ms
). Domyślna wartość to 0s
.
funkcja czasu przejścia
Używaj właściwości transition-timing-function
, aby zmieniać szybkość przejścia na CSS na przestrzeni transition-duration
.
Domyślnie CSS przenosi elementy ze stałą szybkością (transition-timing-function: linear
). Przejścia liniowe mogą jednak wyglądać nieco sztucznie: w rzeczywistości obiekty mają wagę i nie mogą się od razu zatrzymać i rozpocząć. Wygładzanie lub opuszczanie przejścia może sprawić, że przejścia będą bardziej żywe i naturalne.
Nasz moduł na temat animacji CSS zawiera obszerny przegląd funkcji związanych z czasem.
Za pomocą DevTools możesz eksperymentować z różnymi funkcjami czasu w czasie rzeczywistym.
opóźnienie przejścia
Użyj właściwości transition-delay
, aby określić godzinę, o której rozpocznie się przenoszenie. Jeśli zasada transition-duration
nie jest określona, przenoszenie rozpocznie się natychmiast, ponieważ wartością domyślną jest 0s
. Ta właściwość akceptuje jednostkę czasu, np. sekundy (s
) lub milisekundy (ms
).
Ta właściwość jest przydatna do rozłożenia przejść w czasie. Można to osiągnąć przez ustawienie dłuższej wartości transition-delay
dla każdego kolejnego elementu w grupie.
transition-delay
przydaje się też do debugowania. Ustawienie opóźnienia na wartość ujemną może rozpocząć przejście na kolejne ramy czasowe.
skrót: przejście
Podobnie jak w przypadku większości właściwości CSS, dostępna jest wersja skrócona. transition
to połączenie typu transition-property
, transition-duration
, transition-timing-function
i transition-delay
.
.longhand {
transition-property: transform;
transition-duration: 300ms;
transition-timing-function: ease-in-out;
transition-delay: 0s;
}
.shorthand {
transition: transform 300ms ease-in-out 0s;
}
Co można przenieść, a czego nie?
Podczas pisania kodu CSS możesz określić, które właściwości mają zawierać animowane przejścia. Zapoznaj się z tą listą w MDN listy właściwości CSS możliwych do animacji.
Można przenosić tylko te elementy, które mogą mieć „stan pośredni” między stanem początkowym a końcowym. Nie można na przykład dodać przejść w przypadku parametru font-family
, ponieważ nie jest jasne, jak powinien wyglądać „stan pośredni” między zdarzeniami serif
i monospace
. Z drugiej strony można dodawać przejścia dla elementu font-size
, ponieważ jego jednostka ma długość, która może być interpolowana.
Oto kilka typowych właściwości, które możesz przenosić.
Przekształć
Właściwość CSS transform
jest często przenoszona, ponieważ jest ona przyspieszana za pomocą GPU, która zapewnia płynniejszą animację i zużywa mniej baterii. Ta właściwość pozwala dowolnie skalować, obracać, przesuwać i pochylać element.
Zapoznaj się z sekcją poświęconą przekształceniom w module Funkcje.
Kolor
Przed, w trakcie i po interakcji kolor może być świetnym wskaźnikiem stanu. Na przykład przycisk może zmienić kolor, gdy najedziemy na niego kursorem. Taka zmiana koloru może poinformować użytkownika, że przycisk można kliknąć.
Właściwości color
, background-color
i border-color
to tylko kilka miejsc, w których można zmienić kolor po interakcji.
Zapoznaj się z naszym modułem dotyczącym kolorów.
Cienie
Cienie są często przenoszone w celu wskazania zmiany wysokości, np. w wyniku skupienia użytkownika.
Zapoznaj się z naszym modułem o cieniach.
Filtry
filter
to zaawansowana właściwość CSS, która umożliwia dodawanie efektów graficznych na bieżąco. Przejście między różnymi stanami filter
może przynieść całkiem imponujące wyniki.
Zapoznaj się z naszym modułem o filtrach.
Wyzwalacze przejścia
Twoja usługa porównywania cen musi zawierać zmianę stanu oraz zdarzenie, które wywołuje tę zmianę, aby można było aktywować przejść do usług porównywania cen. Typowym przykładem takiej reguły jest pseudoklasa :hover
. Ta pseudoklasa jest dopasowywana wtedy, gdy użytkownik najedzie kursorem na element.
Poniżej znajdziesz listę niektórych pseudoklas i zdarzeń, które mogą wywoływać zmiany stanu elementów.
:hover
: pasuje do sytuacji, gdy kursor znajduje się nad elementem.:focus
: pasuje do, jeśli element jest aktywny.:focus-within
: wskazuje, że element lub jego elementy podrzędne są zaznaczone.:target
: pasuje do sytuacji, gdy fragment bieżącego adresu URL pasuje do identyfikatora elementu.:active
: wskazuje, kiedy element jest aktywowany (zwykle po najechaniu na niego myszą).class
w porównaniu z JavaScriptem: gdyclass
elementu CSS elementu zmienia się przez JavaScript, CSS przenosi odpowiednie właściwości, które uległy zmianie.
Różne przejścia dla wejścia i wyjścia
Ustawiając różne właściwości elementu transition
po najechaniu kursorem myszy lub w wyniku zaznaczenia, możesz uzyskać interesujące efekty.
.my-element {
background: red;
/* This transition is applied on the "exit" transition */
transition: background 2000ms ease-in;
}
.my-element:hover {
background: blue;
/* This transition is applied on the "enter" transition */
transition: background 150ms ease;
}
Ułatwienia dostępu
Przejścia CSS nie są dla każdego. U niektórych osób przejścia i animacje mogą powodować chorobę lokomocyjną lub dyskomfort. Na szczęście usługa porównywania cen ma funkcję multimediów o nazwie prefers-reduced-motion
, która wykrywa, czy użytkownik wybrał mniej ruchu ze swojego urządzenia.
/*
If the user has expressed their preference for
reduced motion, then don't use transitions.
*/
@media (prefers-reduced-motion: reduce) {
.my-element {
transition: none;
}
}
/*
If the browser understands the media query and the user
explicitly hasn't set a preference, then use transitions.
*/
@media (prefers-reduced-motion: no-preference) {
.my-element {
transition: transform 250ms ease;
}
}
Więcej informacji o tej funkcji multimediów znajdziesz w poście na naszym blogu (prefers-reduced-motion: Czasami mniej ruchu to więcej).
Możliwe spowolnienie działania witryny
Podczas pracy z przejściami z usług porównywania cen możesz napotkać problemy z wydajnością, jeśli dodasz przejścia dla niektórych właściwości CSS. Na przykład gdy zmienią się właściwości takie jak width
lub height
, przesuwają treść do końca strony. Wymusza to obliczanie przez CSS nowych pozycji każdego elementu, którego dotyczy zmiana, dla każdej klatki przejścia. Jeśli to możliwe, zalecamy używanie zamiast nich właściwości takich jak transform
i opacity
.
Aby dowiedzieć się więcej na ten temat, zapoznaj się z naszym przewodnikiem po bardzo skutecznych animacjach CSS.
Sprawdź swoją wiedzę
Sprawdź swoją wiedzę na temat przenoszenia kont
Która właściwość przejścia służy do określania wygładzania?
transition-duration
transition-easing
transition-cubic-bezier
transition-timing-function
animation-ease
Sprawdzoną metodą jest korzystanie z tagu transition-property: all
all
, może to spowodować problemy z wydajnością i niezamierzone przenoszenie kont.Wszystkie usługi mogą zostać przeniesione.
font-family
nie można przenieść.