Animowanie widoków modalnych

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.