Utilitários de transição

As transições CSS tornam as mudanças de estado suaves e intencionais, em vez de abruptas. Quando um botão muda de cor de fundo ao passar o cursor, uma barra lateral desliza para dentro ou um campo de entrada recebe um anel de foco, as transições comunicam aos usuários que algo aconteceu e direcionam sua atenção. Os utilitários de transição do Tailwind permitem adicionar essas animações com uma única classe — sem CSS personalizado para os casos de uso mais comuns.

O utilitário básico transition habilita transições CSS para as propriedades mais comumente animadas: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform e filter. Adicionar apenas transition a um botão geralmente é suficiente para animar suavemente as mudanças de cor ao passar o cursor.

Use utilitários de transição direcionados para animar apenas propriedades específicas. Isso é mais eficiente do que transition-all, porque o navegador não precisa recalcular todas as propriedades que podem ser animadas a cada quadro. O Tailwind oferece transition-colors, transition-opacity, transition-shadow, transition-transform e transition-all para diferentes necessidades.

transition-all faz a transição simultânea de todas as propriedades CSS que podem ser animadas. Embora seja conveniente, pode causar comportamentos inesperados — por exemplo, propriedades de layout como height ou width podem ser animadas quando o senhor queria apenas mudanças de cor. Ele também é menos eficiente porque o navegador acompanha todas as propriedades. Sempre que possível, use utilitários de transição específicos; use transition-all somente quando realmente precisar que várias propriedades não relacionadas sejam animadas em conjunto.

Os utilitários de transição funcionam habilitando a propriedade CSS transition. Variantes de estado como hover:, focus: e group-hover: fornecem os estados anterior e posterior entre os quais a transição é animada. Coloque sempre a classe transition no elemento base (não dentro da variante), para que ela se aplique nas duas direções — a transição é executada tanto ao entrar quanto ao sair do estado.

Para fazer elementos aparecerem e desaparecerem gradualmente, é necessário fazer a transição de opacity em conjunto com o gerenciamento de visibility ou display. As transições CSS não podem animar de ou para display: none; portanto, use opacity com pointer-events-none para efeitos simples de aparecimento gradual. Para elementos que precisam realmente desaparecer (sendo removidos da ordem de tabulação), combine transições de opacidade com a alternância de classes em JavaScript.

As transições de transformação são especialmente suaves porque são executadas na GPU, em vez de provocarem recálculos do layout. Todos os utilitários scale-*, rotate-*, translate-* e skew-* do Tailwind são animados adequadamente com transition-transform. Efeitos de escala em cartões e botões, efeitos de rotação em ícones e efeitos de deslizamento em painéis usam essa abordagem para obter o melhor desempenho.

Alguns usuários sentem enjoo ou têm convulsões causadas por animações e configuram o próprio OS para Reduce Motion. O Tailwind oferece as variantes motion-reduce: e motion-safe:, que são ativadas com base na consulta de mídia prefers-reduced-motion do usuário. Use motion-safe: para aplicar animações somente quando o usuário não tiver solicitado a redução de movimento, tornando suas transições acessíveis por padrão.

As transições de foco são especialmente importantes para a navegação pelo teclado. Quando o usuário chega a um campo de entrada ou botão usando a tecla Tab, o anel de foco deve aparecer suavemente, em vez de surgir instantaneamente. Aplique transition a todos os elementos interativos para que a transição do anel de foco tenha o mesmo acabamento da transição ao passar o cursor. Inclua focus:ring-* e focus:ring-offset-* com uma transição para obter a melhor experiência com o teclado.

O senhor pode combinar vários utilitários de transição específicos em um único elemento para animar apenas um conjunto preciso de propriedades. O Tailwind compõe esses utilitários usando a abreviação CSS transition-property. Empilhar transition-colors e transition-shadow no mesmo elemento faz com que tanto as cores quanto as sombras sejam animadas, enquanto outras propriedades, como transformações, permanecem instantâneas.

Aqui está um link de navegação realista com todas as transições aprimoradas: o fundo aparece gradualmente ao passar o cursor, a cor do texto muda simultaneamente, o sublinhado cresce da esquerda para a direita usando uma transformação de escala e os estados de foco correspondem exatamente ao estilo ao passar o cursor. Cada interação parece intencional e suave, sem uma única linha de CSS personalizado.

Nesta lição, o senhor aprendeu que o utilitário básico transition habilita animações suaves para propriedades comuns; os utilitários de transição específicos, como transition-colors e transition-transform, são mais eficientes do que transition-all; e a variante motion-safe: garante que as animações só sejam aplicadas quando o usuário não tiver solicitado a redução de movimento. A seguir, controlaremos a duração e as funções de temporização das transições.