Przejścia

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: gdy class 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