Já faz algum tempo que uso o mesmo padrão de animação em meus projetos para animar elementos na tela. Em sua forma mais simples, você teria um elemento estilizado com opacidade zero e, em seguida, alteraria o estilo para ter uma opacidade de um com uma transição CSS de um segundo. Podemos desenvolver isso adicionando outras propriedades de transição, alterando a duração, adicionando um atraso ou definindo uma atenuação personalizada. é um componente React reutilizável que criei para usar sempre que quiser adicionar rapidamente alguns efeitos de animação aos meus projetos. Um componente utilitário simples, ele combina animação CSS com classes Tailwind para criar animações fluidas e atraentes com o mínimo de esforço. <AnimateIn/> Vamos dar uma olhada em como ele é usado. Após importar o componente, defina os estados e com classes Tailwind. Envolva o elemento de destino em para ver a animação ganhar vida. from to <AnimateIn/> import AnimateIn from '../animation/AnimateIn'; <AnimateIn from="opacity-0 scale-90" to="opacity-100 scale-100" duration={500} > <YourComponent /> </AnimateIn> Aqui está um exemplo um pouco mais complexo que usa mais propriedades para animar um título e um subtítulo. import AnimateIn from '../animation/AnimateIn'; <header> <AnimateIn as="h1" from="opacity-0 translate-y-32" to="opacity-100 translate-y-0" delay={500} duration={300} className="text-4xl" style={{transitionTimingFunction:"cubic-bezier(0.25, 0.4, 0.55, 1.4)"}} > My Big Headline </AnimateIn> <AnimateIn as="h2" from="opacity-0 scale-0" to="opacity-100 scale-100" delay={800} duration={500} className="text-lg" > This is a subtitle below the headline </AnimateIn> </header> No exemplo do título, é usado para criar um efeito deslizante combinado com um fade-in. Veja como cada propriedade contribui para a animação: <AnimateIn/> propriedade : Ao definir , dizemos ao AnimateIn para renderizar a animação como um elemento . as as="h1" <h1> Propriedades e : A propriedade inicia o título fora da tela ( , movendo-o 32 unidades para baixo) e invisível ( ). A propriedade então traz o título para sua posição final (de volta para ) e o torna totalmente visível ( ). from to from translate-y-32 opacity-0 to translate-y-0 opacity-100 Propriedade : a animação é definida para começar imediatamente, sem atraso, e dura 300 ms. duration Propriedade : O aplica a classe de utilitário do Tailwind para definir o tamanho da fonte, fazendo com que o título se destaque. className className="text-4xl" propriedade : a personalizada ( ) adiciona uma facilidade única à animação, dando-lhe um efeito de salto. style transitionTimingFunction cubic-bezier(0.25, 0.4, 0.55, 1.4) A legenda usa um conjunto diferente de animações para complementar o título, criando um fluxo visual coeso. propriedade : aqui, renderiza o componente como um elemento , adequado para uma legenda. as as="h2" <h2> Propriedades e : A legenda começa reduzida a zero ( ) e invisível ( ), depois aumenta até seu tamanho natural ( ) e se torna totalmente visível ( ). Este efeito de escala, combinado com um fade-in, adiciona profundidade à animação. from to scale-0 opacity-0 scale-100 opacity-100 propriedades e : a legenda também começa após um atraso de 800 ms, para que comece depois que o título estiver totalmente animado. Essa abordagem escalonada garante que cada elemento tenha seu momento de foco. delay duration Propriedade : O define o tamanho da fonte da legenda, tornando-a menor que o título, mas ainda significativa. className className="text-lg" Para entender melhor o que está acontecendo, vamos dar uma olhada no código fonte de : <AnimateIn/> no Github usa um gancho para inicializar o estado da animação com a propriedade , que deve ser uma ou mais classes de utilitário Tailwind, preparando o cenário para o ponto inicial da animação antes que qualquer animação ocorra. <AnimateIn/> useState from O primeiro gancho no componente é para respeitar as preferências do usuário para movimento reduzido. Ao ouvir a consulta de mídia , o comportamento da animação é baseado nas configurações do sistema do usuário. Se o movimento reduzido for preferido, a animação será totalmente ignorada, definindo diretamente o estado da animação para a propriedade , permitindo uma experiência acessível. useEffect (prefers-reduced-motion: reduce) to O segundo gancho é onde reside a lógica da animação. Se o usuário não indicou uma preferência por movimento reduzido, o componente define um temporizador que altera o estado da animação valor inicial o valor final após o atraso especificado. Essa transição cria o efeito visual de animação. useEffect from to A função de limpeza deste gancho (a instrução return) limpa o cronômetro, evitando possíveis vazamentos de memória, como se o componente fosse desmontado antes da conclusão da animação. A chamada da função é o mecanismo de renderização do componente. Ele cria dinamicamente um elemento HTML baseado na propriedade , permitindo o uso do componente em diferentes elementos HTML. O é construído usando a função , que combina as classes de utilitário do Tailwind, o personalizado passado como um suporte e o estado atual da animação. Essa atribuição dinâmica de classe é o que aplica os estilos e transições desejados ao elemento. React.createElement as className cn popularizada por shadcn className Além disso, há um atributo que pode ser passado para definir diretamente as propriedades de estilo no contêiner de animação. A é definida com base na propriedade , mas muda de forma inteligente para se o usuário preferir movimento reduzido, desativando efetivamente a animação enquanto mantém a funcionalidade do componente. style transitionDuration duration 0ms Se você quiser usar em seu próprio projeto e ele já usa , então você já tem tudo que precisa, basta e adicioná-lo aos seus componentes. <AnimateIn/> shadcn baixar AnimateIn.tsx Caso contrário, você desejará , bem como o para mesclar classes do tailwind. instalar o Tailwind mxcn utilitário útil Assim como o shadcn, <AnimateIn/> foi criado para ser um componente reutilizável que você pode copiar e colar em seus aplicativos e personalizar de acordo com suas necessidades. O código é seu. Além disso, criei uma bela página de demonstração para brincar com a criação de diferentes animações com em . <AnimateIn/> animate-in.vercel.app Também publicado aqui

Este áudio é produzido no idioma original da história!

Muito longo; Para ler

Making security fun one episode at a time

Criei um componente utilitário React para animações com Tailwind e CSS: AnimateIn

Muito longo; Para ler

John Polacek

About Author

Rótulos

Languages

ESTE ARTIGO FOI APRESENTADO EM...

Criei um componente utilitário React para animações com Tailwind e CSS: AnimateIn

Muito longo; Para ler

John Polacek

About Author

Rótulos

Languages

ESTE ARTIGO FOI APRESENTADO EM...

HISTÓRIAS RELACIONADAS