Como animar visualizações modais

As visualizações modais bloqueiam a interface do usuário para exibir mensagens importantes. Saiba como animar visualizações modais em seus aplicativos.

Paul Lewis

Faça um teste

As visualizações modais são para mensagens importantes e, por isso, você tem bons motivos para bloquear a interface do usuário. Use-as com cuidado, porque são incômodas e podem arruinar facilmente a experiência do usuário se usadas em excesso. Mas, em algumas circunstâncias, elas são as visualizações certas para usar, e um pouco de animação dá vida a elas.

• Use visualizações modais com moderação. Os usuários ficam frustrados se você interrompe a experiência deles desnecessariamente.
• Adicionar escala à animação proporciona um bom efeito de “queda”.
• Remova a visualização modal rapidamente quando o usuário a dispensar. No entanto, deixe a visualização modal na tela um pouco mais lentamente para não surpreender o usuário.

A sobreposição modal precisa estar alinhada à janela de visualização. Portanto, defina a position como fixed:

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

  pointer-events: none;
  opacity: 0;

  will-change: transform, opacity;
}

Ele tem um opacity inicial de 0, por isso, fica oculto da visualização, mas também precisa que pointer-events seja definido como none para que cliques e toques sejam transmitidos. Sem isso, todas as interações são bloqueadas, e a página inteira não responde. Por fim, como ela anima a opacity e a transform, elas precisam ser marcadas como alteradas com will-change. Consulte também Como usar a propriedade will-change.

Quando a visualização está visível, ela precisa aceitar interações e ter um opacity de 1:

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

Agora sempre que a visualização modal for necessária, você poderá usar o JavaScript para alternar a classe "visible":

modal.classList.add('visible');

Neste ponto, a visualização modal aparece sem nenhuma animação, então você pode adicioná-la (consulte também Easing personalizado):

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

Adicionar scale à transformação faz com que a visualização pareça cair na tela levemente, o que é um bom efeito. A transição padrão se aplica às propriedades de transformação e opacidade com uma curva personalizada e duração de 0,1 segundo.

A duração é bem curta, mas é ideal para quando o usuário dispensa a visualização e quer voltar para o app. A desvantagem é que ela provavelmente é muito agressiva para quando a visualização modal aparece. Para corrigir isso, substitua os valores de transição para a 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);
}

Agora, a visualização modal leva 0,3 segundo para aparecer na tela, o que é um pouco menos agressivo, mas é dispensada rapidamente, o que o usuário apreciará.