Animazione delle visualizzazioni modali

Le visualizzazioni modali bloccano l'interfaccia utente in modo che mostri messaggi importanti. Scopri come animare le visualizzazioni modali nelle tue app.

Le visualizzazioni modali sono per i messaggi importanti e per i quali esistono ottimi motivi per bloccare l'interfaccia utente. Usali con cautela, perché sono fastidiosi e possono facilmente rovinare l'esperienza dell'utente se abusati. In alcuni casi, però, sono le visualizzazioni giuste e l'aggiunta di animazioni le darà vita.

• Utilizza le visualizzazioni modali con parsimonia; gli utenti si sentono frustrati se interrompi la loro esperienza inutilmente.
• L'aggiunta di scala all'animazione permette di ottenere un bel effetto "Drop on".
• Elimina rapidamente la visualizzazione modale quando l'utente la ignora. Tuttavia, sposta la visualizzazione modale sullo schermo un po' più lentamente per non sorprendere l'utente.

L'overlay modale deve essere allineato all'area visibile, quindi imposta position su fixed:

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  pointer-events: none;
  opacity: 0;

  will-change: transform, opacity;
}

Ha un valore iniziale di opacity pari a 0, quindi non è visibile, ma deve anche avere pointer-events impostato su none, in modo che i clic e i tocchi passino attraverso. Senza questo, tutte le interazioni vengono bloccate e l'intera pagina non risponde. Infine, poiché anima i suoi opacity e transform, questi devono essere contrassegnati come modificati con will-change (consulta anche Utilizzo della proprietà will-change).

Quando la visualizzazione è visibile, deve accettare interazioni e avere un valore di opacity pari a 1:

.modal.visible {
  pointer-events: auto;
  opacity: 1;
}

Ora, ogni volta che è necessaria la visualizzazione modale, puoi utilizzare JavaScript per attivare/disattivare la classe "visible":

modal.classList.add('visible');

A questo punto, la visualizzazione modale appare senza animazione, quindi puoi aggiungerla (vedi anche Easing personalizzato):

.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);
}

Se aggiungi scale alla trasformazione, la vista sembrerà cadere leggermente sullo schermo, un bel effetto. La transizione predefinita si applica alle proprietà di trasformazione e opacità con una curva personalizzata e una durata di 0,1 secondi.

Tuttavia, la durata è piuttosto breve, ma è ideale quando l'utente ignora la visualizzazione e vuole tornare alla tua app. Lo svantaggio è che probabilmente è troppo aggressiva per la visualizzazione modale. Per risolvere il problema, sostituisci i valori di transizione per la classe 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);
}

Ora la visualizzazione modale impiega 0,3 secondi per apparire sullo schermo, un'opzione un po' meno aggressiva, ma viene ignorata rapidamente, cosa che l'utente apprezzerà.