transition-behavior
Pozwala włączyć do przejść właściwości zmieniające się skokowo, takie jak display.
- Wartość domyślna
normal- Dziedziczona
- Nie
- Animowalna
- nie
- Dotyczy
- wszystkie elementy
- JavaScript
element.style.transitionBehavior = "allow-discrete"
Przykład
#.popup {
transition: opacity 0.3s, display 0.3s allow-discrete;
}
.popup.closed {
opacity: 0;
display: none;
}
@starting-style {
.popup { opacity: 0; }
}<p style="margin: 0; color: #a3a3a3;">Okienko płynnie się pojawia i znika, mimo przełączania display.</p>Definicja i zastosowanie
#Niektóre właściwości, na przykład display czy content-visibility, zmieniają się skokowo i domyślnie nie biorą udziału w przejściach. Wartość allow-discrete pozwala uwzględnić je w przejściu.
Dzięki temu element może płynnie zniknąć przez zmianę opacity, a display: none zadziała dopiero na końcu przejścia, zamiast od razu ukrywać element.
Do płynnego pojawiania się elementu potrzebna jest jeszcze reguła @starting-style, która opisuje stan początkowy tuż po wyświetleniu.
Składnia
#transition-behavior: normal | allow-discrete;Wartości
#- Element znika natychmiast, bo
displayzmienia się od razu. - Element płynnie zanika, a
display: nonedziała na końcu przejścia.
Wartości w praktyce
#normal
display zmienia się od razu..demo { transition-behavior: normal; }allow-discrete
display: none działa na końcu przejścia..demo { transition-behavior: allow-discrete; }Obsługa przeglądarek
#Nowość w przeglądarkach · od 2024 roku
Działa w aktualnych wersjach wszystkich głównych przeglądarek. Starsze wersje mogą tego nie obsługiwać.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Słowo
allow-discretemożesz dopisać w skrócietransitionprzy konkretnej właściwości, jak w przykładzie. - Do animowania elementów wchodzących na stronę potrzebujesz też
@starting-style.
Powiązane hasła
#- transitionSkrót, który sprawia, że zmiany wartości CSS następują płynnie, a nie skokowo.
- transition-propertyWskazuje, które właściwości CSS mają zmieniać się płynnie.
- displayUstala, jak element zachowuje się w układzie strony i jak układa swoje dzieci.
- @starting-styleOpisuje styl, od którego zaczyna się przejście, gdy element pojawia się na stronie. Dzięki temu nowe elementy mogą płynnie wjeżdżać.
Widzisz błąd albo brakuje przykładu? Napisz do nas.