Kurs HTML

Do czego służy transition?

Właściwość transition jest **skróconą (shorthand) właściwością**, która pozwala na zdefiniowanie wszystkich czterech podstawowych właściwości przejść (transition-property, transition-duration, transition-timing-function i transition-delay) w jednej deklaracji CSS.

Używanie skrótu jest zazwyczaj bardziej zwięzłe i czytelne, zwłaszcza gdy definiujemy przejście dla jednej lub wielu właściwości z tymi samymi parametrami czasu, funkcji czasowej i opóźnienia.

Składnia

Składnia właściwości transition pozwala na podanie wartości dla poszczególnych właściwości przejścia w określonej kolejności, oddzielonych spacjami. Można również zdefiniować wiele przejść dla różnych właściwości, oddzielając ich definicje przecinkami.

transition: [<transition-property>] || [<transition-duration>] || [<transition-timing-function>] || [<transition-delay>] [, ...];Kopiuj

Kolejność i interpretacja wartości:

• Przeglądarka potrafi zazwyczaj rozróżnić poszczególne wartości na podstawie ich typu (np. wartość czasu, nazwa właściwości, funkcja czasowa).
• Ważne: Jeśli podasz **dwie wartości czasu**, pierwsza z nich jest zawsze interpretowana jako transition-duration, a druga jako transition-delay.
• Wartości, których nie podasz, przyjmą swoje wartości domyślne:
  • transition-property: all
  • transition-duration: 0s
  • transition-timing-function: ease
  • transition-delay: 0s

Przykłady:

.element1 {
  /* Przejście dla wszystkich właściwości, trwające 0.5s, z funkcją ease-out */
  transition: all 0.5s ease-out;
  /* Równoważne: */
  /* transition-property: all; */
  /* transition-duration: 0.5s; */
  /* transition-timing-function: ease-out; */
  /* transition-delay: 0s; */
}

.element2 {
  /* Przejście tylko dla 'opacity', trwające 300ms, z opóźnieniem 100ms */
  transition: opacity 300ms linear 100ms;
  /* Równoważne: */
  /* transition-property: opacity; */
  /* transition-duration: 300ms; */
  /* transition-timing-function: linear; */
  /* transition-delay: 100ms; */
}

.element3 {
  /* Dwa przejścia: */
  /* 1. dla 'width', trwające 0.4s, ease-in */
  /* 2. dla 'background-color', trwające 0.2s, linear, z opóźnieniem 0.1s */
  transition: width 0.4s ease-in, background-color 0.2s linear 0.1s;
}

.element4 {
  /* Minimalna definicja - tylko czas trwania (reszta domyślna) */
  /* Animuje 'all' przez 0.3s z funkcją 'ease' i opóźnieniem '0s' */
  transition: 0.3s;
}

.element5 {
  /* Dwa czasy - pierwszy to duration, drugi to delay */
  /* Animuje 'all' przez 0.5s z funkcją 'ease' i opóźnieniem 0.2s */
  transition: 0.5s 0.2s;
}
Kopiuj

Zalety używania skrótu

• Zwięzłość: Kod jest krótszy i często łatwiejszy do odczytania na pierwszy rzut oka.
• Łatwość zarządzania: Wszystkie parametry przejścia dla danej właściwości (lub zestawu właściwości) są w jednym miejscu.
• Standardowa praktyka: W większości przypadków deweloperzy preferują używanie właściwości skróconej transition.

Kiedy używać pełnych właściwości?

Chociaż skrót jest wygodny, istnieją sytuacje, w których użycie pełnych właściwości (transition-property, transition-duration itd.) może być lepsze:

• Nadpisywanie tylko jednego aspektu: Jeśli chcesz nadpisać tylko jeden parametr przejścia w bardziej specyficznym selektorze (np. zmienić tylko transition-duration w stanie :hover), użycie pełnej właściwości jest bardziej precyzyjne i nie wymaga powtarzania pozostałych wartości.
• Czytelność w bardzo złożonych przypadkach: Przy definiowaniu wielu przejść z różnymi parametrami dla wielu właściwości, rozbicie tego na osobne właściwości może czasami (choć rzadko) poprawić czytelność.

Przykład nadpisywania:

.button {
  /* Definicja bazowa za pomocą skrótu */
  transition: background-color 0.3s ease-out, transform 0.2s linear;
}

.button:hover {
  background-color: red;
  transform: scale(1.1);
  /* Nadpisz tylko czas trwania dla transformacji w stanie hover */
  transition-duration: 0.4s; 
  /* Uwaga: To nadpisze czasy dla OBU przejść (background-color i transform) */
  /* Lepsze może być: */
  /* transition: background-color 0.3s ease-out, transform 0.4s linear; */
  /* Lub użycie pełnych właściwości w stanie bazowym */
}
Kopiuj