Animações de entrada e saída sem biblioteca

Quando você renderiza condicionalmente com {show && }, o React remove o elemento do DOM no instante em que show se torna falso. Não há tempo para uma animação de saída, pois o nó já desapareceu.

Animações de entrada são fáceis; as de saída são o verdadeiro desafio.

A correção mais simples é nunca desmontar o elemento. Mantenha-o renderizado e anime a opacity até zero, além de aplicar pointer-events: none quando estiver oculto, e faça o caminho inverso quando ele for exibido.

Isso proporciona desaparecimentos graduais suaves nas duas direções, ao custo de manter o elemento no DOM.

Para desmontar de verdade, modele uma pequena máquina de estados com fases como mounting, mounted, unmounting e unmounted. Remova o nó somente depois que a animação de saída terminar.

O estado determina quais classes de animação são aplicadas em cada fase.

Você pode encapsular a máquina em um gancho personalizado, geralmente chamado de useMount. Ele recebe a visibilidade desejada e retorna se o elemento deve estar no DOM, além de sua fase atual.

Os componentes permanecem limpos porque a lógica de temporização fica no gancho reutilizável.

Seguindo convenções comuns, aplique enter e depois enter-active durante a montagem, e exit e depois exit-active durante a remoção. A classe básica define o estado inicial, enquanto a classe ativa define o estado final com uma transição.

Alternar entre as duas no quadro correto produz a animação.

Para saber quando uma animação de saída termina, acompanhe o evento transitionend no elemento. Quando ele for disparado para a saída, altere o estado para unmounted e remova o nó.

Isso vincula a desmontagem precisamente ao fim da animação visual, em vez de usar um tempo limite estimado.

Você pode envolver tudo isso em um componente Transition que aceita uma propriedade in e elementos filhos. Ele mantém os filhos montados durante a animação de saída e aplica as classes corretas em cada fase.

Quem utiliza o componente só precisa alternar in para obter movimentos corretos de entrada e saída sem esforço.

Um detalhe sutil: você precisa deixar o navegador desenhar a classe inicial antes de adicionar a classe ativa; caso contrário, o elemento salta sem transição. Um requestAnimationFrame ou um refluxo forçado entre as duas garante que a transição realmente seja executada.

Isso garante que o navegador registre primeiro os valores iniciais.

A biblioteca react-transition-group fornece os componentes Transition e CSSTransition, que implementam exatamente esse padrão, incluindo o ciclo de vida das classes e o momento da desmontagem.

Sua versão DIY reproduz as ideias centrais da biblioteca, o que facilita entendê-la depois que você mesmo constrói uma versão.

Para um único desaparecimento gradual simples, a abordagem de manter o elemento montado ou um pequeno gancho é suficiente e evita uma dependência. Para muitas transições coordenadas, listas com adições e remoções ou sequenciamentos complexos, uma biblioteca economiza tempo e evita erros em casos extremos.

Escolha de acordo com a complexidade de animação de que seu aplicativo realmente precisa.

Animações de saída exigem manter o elemento ativo até que a animação seja concluída, seja nunca o desmontando, seja usando uma máquina de estados com transitionend ou uma biblioteca.

Entender esses mecanismos permite escolher a abordagem mais simples que atenda às suas necessidades.

Teste sua compreensão sobre animações de saída.

Você aprendeu por que as animações de saída são difíceis, duas soluções — manter o elemento montado e usar uma máquina de estados de montagem —, como transitionend determina o momento da desmontagem e como criar um componente Transition reutilizável.

Você também viu quando recorrer a react-transition-group em vez de DIY.