Transições CSS com Alterações de Estado do React

Uma transition CSS interpola suavemente uma propriedade entre dois valores ao longo do tempo, em vez de alternar instantaneamente. Você a declara no elemento com transition: property duration timing-function delay.

No React, normalmente você não anima valores incorporados manualmente. Em vez disso, alterna uma classe ou um estilo com o estado, e o CSS cuida dos quadros intermediários.

O padrão comum é manter um valor booleano em useState e trocar uma classe CSS quando ele muda. Quando a classe muda, a propriedade-alvo recebe um novo valor, e o CSS anima a diferença.

Por exemplo, isOpen determina se o elemento tem a classe open, e a classe open define uma altura ou transformação diferente.

Uma configuração típica é const [isVisible, setIsVisible] = useState(false). Um botão chama setIsVisible(v => !v) para alternar o valor.

Usar o atualizador funcional v => !v evita um estado obsoleto quando várias atualizações são enfileiradas juntas, mantendo a alternância confiável.

Você cria o className dinamicamente: className={'panel ' + (isVisible ? 'panel--shown' : 'panel--hidden')}. A classe base contém a declaração da transição, e as classes modificadoras contêm os valores inicial e final.

Manter transition na classe base sempre presente faz a animação funcionar nas duas direções, tanto ao abrir quanto ao fechar.

Você pode animar várias propriedades de uma vez, listando-as: transition: transform 300ms ease, opacity 300ms ease. Um efeito de esmaecimento e deslizamento combina uma alteração de opacity com um translateY em transform.

Animar as duas propriedades em conjunto cria uma entrada refinada, na qual o elemento desliza para cima enquanto surge gradualmente.

transition-delay adia o início de uma transição. Ao atribuir atrasos crescentes aos itens de uma lista, você cria uma sequência escalonada na qual cada item é animado um pouco depois do anterior.

No React, você pode calcular o atraso diretamente, por exemplo: style={{ transitionDelay: index * 50 + 'ms' }}.

A propriedade display não pode ser animada porque não tem valores intermediários entre none e block. Animá-la produz um salto instantâneo, não um esmaecimento.

Em vez disso, anime opacity para obter o esmaecimento visual e alterne pointer-events: none para que o elemento oculto ignore cliques enquanto estiver invisível.

A função de temporização define como a velocidade muda ao longo da duração. linear move-se a uma velocidade constante, ease começa e termina lentamente, e cubic-bezier(...) permite definir uma curva totalmente personalizada.

Curvas personalizadas são ótimas para movimentos rápidos ou com efeito de ressalto; por exemplo, cubic-bezier(0.34, 1.56, 0.64, 1) cria uma leve ultrapassagem.

Você pode armazenar durações em propriedades personalizadas do CSS, como --speed: 300ms, e reutilizá-las: transition: opacity var(--speed) ease. Isso mantém a temporização consistente entre os componentes.

O React pode até definir a variável diretamente com style={{ '--speed': '500ms' }}, permitindo que as propriedades controlem a temporização da animação.

Os navegadores podem animar transform e opacity no compositor da GPU sem recalcular o layout ou redesenhar a tela. Animar propriedades como width, top ou margin força trabalho de layout a cada quadro e pode causar travamentos.

Quando precisar mover, dimensionar ou girar, use transform; quando precisar criar um esmaecimento, use opacity.

Uma transição confiável no React combina um estado booleano, uma classe modificadora condicional e uma classe base que declara transition em propriedades adequadas para a GPU. O estado alterna a classe, e o CSS faz a animação.

Isso mantém seus componentes declarativos e aproveita o navegador para produzir movimentos suaves.

Teste seu entendimento sobre animações com bom desempenho.

Você aprendeu a acionar transições CSS alternando classes controladas pelo estado, animar transformação e opacidade em conjunto, criar sequências escalonadas com atrasos e evitar animar display usando opacidade e eventos de ponteiro.

Você também viu funções de temporização, durações baseadas em variáveis CSS e por que propriedades compostas pela GPU mantêm o movimento suave.