Transições de navegação direcional

Os aplicativos de página única (SPAs, na sigla em inglês) dão a impressão de navegação ao substituir o conteúdo da página sem navegar para uma nova. Por padrão, o conteúdo é simplesmente substituído, sem transições. As transições direcionais podem reforçar visualmente uma relação espacial entre as visualizações.

Ao deslizar o novo conteúdo na direção em que o usuário está se movendo, você cria um mapa mental da estrutura do aplicativo. Por exemplo, um site de produtos pode mostrar uma transição para a direita para "avançar" e para a esquerda para "voltar", ou uma apresentação de slides pode fazer a transição para cima e para baixo para mostrar os slides seguintes e anteriores.

Etapas de implementação

1. Detectar a direção da navegação: determine se o usuário está avançando ou voltando no fluxo do aplicativo. A forma de detectar a direção depende do seu caso de uso.
2. Acionar transição com tipos: transmita a direção em uma matriz types para document.startViewTransition() para categorizar a transição.
3. Defina animações direcionais com CSS: use a pseudoclasse :active-view-transition-type() para aplicar animações específicas com base no tipo de navegação.

Definição de frames-chave

Defina animações de deslizamento de e para cada direção. Para melhorar o desempenho, anime as mudanças de posição usando a propriedade transform ou as propriedades de transformação individuais, scale, rotate e translate. opacity geralmente também tem um bom desempenho, mas evite animar outras propriedades CSS sem antes verificar se elas não acionam o layout ou a pintura.

/* Slide an element out to the left */
@keyframes slide-to-left {
  /* Mandatory: animate `transform` instead of inset properties for better performance. */
  to { transform: translateX(-100%); }
}

/* Slide an element in from the right */
@keyframes slide-from-right {
  from { transform: translateX(100%); }
}

/* Slide an element out to the right */
@keyframes slide-to-right {
  to { transform: translateX(100%); }
}

/* Slide an element in from the left */
@keyframes slide-from-left {
  from { transform: translateX(-100%); }
}

Definir configurações de animação compartilhadas

Use o seletor ::view-transition-group(root) para aplicar configurações de animação compartilhadas entre todas as transições.

::view-transition-group(root){
  animation: 0.4s ease-in-out both;
}

Como aplicar animações direcionais

Use a pseudoclasse active-view-transition-type para segmentar as visualizações de transição especificamente quando o tipo "forward" ou "backward" estiver ativo.

/* MANDATORY: Apply forward animations when the 'forward' type is active */
html:active-view-transition-type(forward)::view-transition-old(root) {
  animation-name: slide-to-left;
}
html:active-view-transition-type(forward)::view-transition-new(root) {
  animation-name: slide-from-right;
}

/* MANDATORY: Apply backward animations when the 'backward' type is active */
html:active-view-transition-type(backward)::view-transition-old(root) {
  animation-name: slide-to-right;
}
html:active-view-transition-type(backward)::view-transition-new(root) {
  animation-name: slide-from-left;
}

Como acionar a transição

Ao navegar, transmita o tipo apropriado para o método startViewTransition.

const transitionType = yourTransitionTypeLogic();
const updateDOM = yourUpdateDOMLogic();

document.startViewTransition({
  update: updateDOM,
  types: [transitionType] // Matches the CSS :active-view-transition-type() selectors
});

Acessibilidade

Sempre respeite as preferências do usuário para reduzir o movimento desativando ou simplificando as animações.

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(root) {
    animation: none !important;
  }
}

Estratégias de fallback

A API View Transitions é um aprimoramento progressivo. Em navegadores incompatíveis, document.startViewTransition será undefined. É necessário envolver a lógica de navegação em uma verificação de detecção de recursos para garantir que a atualização do DOM ainda ocorra imediatamente sem animação, como mostrado nesta função auxiliar.

/**
 * Navigates to a new view with a directional transition.
 * @param {Function} updateDOM - Callback to update the DOM state.
 * @param {string} direction - Either 'forward' or 'backward'.
 */
function navigate(updateDOM, direction) {
  // Feature detect for browsers that do not support View Transitions
  if (!document.startViewTransition) {
    updateDOM();
    return;
  }

  // Start transition with the specific navigation type
  document.startViewTransition({
    update: updateDOM,
    types: [direction] // Matches the CSS :active-view-transition-type() selectors
  });
}