Como animar transições de página no Gatsby.js

Dimitri Ivashchuk Blocked Desbloquear Seguir Seguindo 11 de janeiro banner de Artur Didenko

Estou desfrutando totalmente do Gatsby por vários motivos, e neste post quero compartilhar como é fácil adicionar transições de página personalizadas ao seu site para torná-lo mais animado e suave.

Usaremos o iniciador padrão do Gatsby para tornar este exemplo o mais isolado possível, mas você pode ter certeza de que ele também funcionará para partidas e projetos mais complexos criados por você a partir do zero.

Como um teaser, construiremos algo semelhante ao que você vê quando segue links neste site. ?

Começando ??

Se você é novo no Gatsby e quer seguir este tutorial, certifique-se de instalar a interface de linha de comando do Gatsby ( Gatsby CLI ) para que você possa inicializar rapidamente novos projetos no futuro.

npm install --global gatsby-cli

Navegue até a pasta do seu projeto e crie um novo projeto Gatsby dentro dele, executando o seguinte comando no terminal:

gatsby new .

Ele criará um projeto com a configuração mais simples possível e deverá ficar assim: (pode variar devido a novas iterações no design do inicial)

Gatsby-default-starter

Instalando dependências necessárias ??

Primeiro de tudo precisamos instalar o reagir-grupo de transição, que é responsável por observar elementos entrando e saindo do DOM e aplicando animações a eles.

npm install react-transition-group

Também instalaremos o gatsby-plugin-layout que, em nosso caso, fornece a propriedade de localização necessária para que as transições funcionem e injeta nosso layout em todas as páginas.

npm install gatsby-plugin-layout

Para fazer o plug-in funcionar como esperado, precisamos mover nosso componente de layout para a pasta de layouts na raiz do nosso projeto e renomeá-lo para index.js . Vamos também adicionar o transition.js à nossa pasta de componentes, onde forneceremos toda a lógica de transição. Por enquanto, deixe-o vazio, pois temos um pouco mais para configurar.

A última etapa é adicionar nosso gatsby-plugin-layout gatsby-config.js ao nosso arquivo gatsby-config.js que está localizado na raiz do nosso projeto.

Componente de transição ?

Isso contém a lógica completa da transição que será aplicada quando um usuário decidir seguir um link para outra página em nosso site.

Dentro de transition.js adicione o seguinte código que explicarei nos comentários:

transition.js

Agora podemos importar o componente Transition para o componente Layout e envolver os filhos que representam nossas páginas dentro dele.

layout.js

Nesse ponto, você pode ter um bug quando alguns elementos da sua página são renderizados duas vezes. Para resolver isso, basta percorrer os arquivos na pasta pages e certificar-se de que eles não importem o componente <Layout> e o usem na declaração de retorno.

Animação espasmódica que queremos corrigir

Agora que tudo está funcionando como esperado e você está aproveitando as transições de página recém-adicionadas, poderá notar um pequeno bug espasmódico que aparece quando a página está sendo rolada para baixo e a animação é iniciada. Note que isso acontece quando há mais conteúdo na página e você pode rolar.

Podemos facilmente corrigir isso com a ajuda de incluir o código abaixo em nosso gatsby-browser.js que você pode encontrar na raiz do nosso projeto. O que fazemos aqui é, na verdade, definir um tempo limite para a animação e esperar que ela seja executada até a página rolar para o topo.

browser.js

Em seu site, deve ficar assim

Espero que você tenha gostado deste pequeno post e use seu novo conhecimento sempre que precisar. Aqui você pode encontrar um link para o repositório GitHub com o código de trabalho deste tutorial. Inscreva-se no Twitter para não perder um próximo post sobre o Gatsby.js e coisas divertidas que você pode fazer com ele!