Widoki modalne blokują wyświetlanie ważnych komunikatów w interfejsie użytkownika. Dowiedz się, jak animować widoki modalne w aplikacjach.
Widoki modalne są przeznaczone do wyświetlania ważnych komunikatów i w przypadku których warto zablokować interfejs użytkownika. Stosuj je z rozwagą, ponieważ są uciążliwe i mogą łatwo pogorszyć wrażenia użytkownika. Jednak w pewnych okolicznościach takie widoki są odpowiednie, a dodanie do nich animacji ożywi je.
- Oszczędnie korzystaj z widoków modalnych – użytkownicy irytują się, jeśli niepotrzebnie przerywasz ich przeglądanie.
- Zastosowanie skali zapewnia przyjemny efekt.
- Szybko pozbądź się widoku modalnego po jego zamknięciu przez użytkownika. Pamiętaj jednak o wolniejszym wyświetlaniu widoku modalnego, aby nie zaskoczyć użytkownika.
Nakładka modalna powinna być wyrównana do widocznego obszaru, więc ustaw jej wartość position
na fixed
:
.modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
opacity: 0;
will-change: transform, opacity;
}
Początkowy parametr opacity
ma wartość 0, więc element jest niewidoczny, ale parametr pointer-events
musi mieć wartość none
, by kliknięcia i dotknięcia były pomijane. Jeśli go nie będzie, zablokuje wszystkie interakcje, a cała strona przestanie odpowiadać. Ponieważ animowany jest element opacity
i transform
, trzeba je oznaczyć jako zmieniające się za pomocą funkcji will-change
(patrz również Używanie właściwości will-change).
Gdy widok jest widoczny, musi akceptować interakcje i mieć opacity
z wartością 1:
.modal.visible {
pointer-events: auto;
opacity: 1;
}
Teraz za każdym razem, gdy potrzebujesz widoku modalnego, możesz użyć JavaScriptu, by przełączyć klasę „visible”:
modal.classList.add('visible');
Na tym etapie widok modalny wyświetla się bez animacji, więc możesz go dodać (zobacz też Wygładzanie niestandardowe):
.modal {
transform: scale(1.15);
transition:
transform 0.1s cubic-bezier(0.465, 0.183, 0.153, 0.946),
opacity 0.1s cubic-bezier(0.465, 0.183, 0.153, 0.946);
}
Dodanie funkcji scale
do przekształcenia sprawia, że widok lekko spada na ekran, co jest przyjemnym efektem. Domyślne przejście dotyczy zarówno właściwości przekształcenia, jak i właściwości przezroczystości z krzywą niestandardową i czasem trwania wynoszącym 0,1 s.
Czas trwania jest dość krótki, ale idealnie sprawdza się, gdy użytkownik zamknie widok i chce wrócić do aplikacji. Wadą jest to, że widok modalny jest prawdopodobnie zbyt agresywny. Aby rozwiązać ten problem, zastąp wartości przejścia dla klasy visible
:
.modal.visible {
transform: scale(1);
transition:
transform 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946),
opacity 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946);
}
Teraz widok modalny pojawia się na ekranie po 0,3 sekundy, co jest nieco mniej agresywne, ale szybko zamyka się, co użytkownik docenie.