Embora o uso do jQuery nos permita escrever uma quantidade relativamente menor de código para obter a funcionalidade desejada, ele também aumenta o tempo de carregamento da página e introduz dependência desnecessária.

A menos que o site em que você está trabalhando já esteja carregando jQuery, você pode querer considerar carregar e animar o conteúdo usando JavaScript puro. O tutorial original foi escrito há muito tempo e o suporte ao navegador, bem como os recursos nativos de JavaScript, melhoraram muito durante esse período.

Marcação e estilo de página da Web

Como estamos tentando replicar o efeito do tutorial original, faz sentido usar a mesma marcação e estilo para nossas páginas da web. Aqui está a marcação que usamos no tutorial original para referência:

1

2

 lang="en">

3

4

     charset="UTF-8">

5

     http-equiv="X-UA-Compatible" content="IE=edge">

6

     name="viewport" content="width=device-width, initial-scale=1.0">

7

8

     rel="stylesheet" href="style.css">

9

10

11

12

13

        
 href="index.html">Home

14

        
 href="about.html">About Us

15

        
 href="team.html">Our Team

16

        
 href="contact.html">Contact

17

18

19

     class="loader">

20

     id="content">

21

         src="dog.svg" />

22

        
Embrace Pawsitivity, Transform Lives!

23

        Welcome to Pawsitive Care Foundation, a dedicated organization working towards the well-being and protection of animals.

24

        Our animal Welfare NGO provides a range of services to support animal welfare:

25

26

            
Rescue and rehabilitation of abused and abandoned animals

27

            
Adoption programs to find loving homes for animals in need

28

            
Education and awareness campaigns to promote responsible pet ownership

29

            
Lobbying and advocacy for stronger animal protection laws

30

            
Collaboration with local communities to implement spay/neuter programs

31

32

33

34

35

A única diferença é que nos livramos do jQuery e nosso load-content.js arquivo agora terá vanilla JS em vez de jQuery.

Aqui está o CSS que usaremos para nosso carregador, bem como o conteúdo:

1

.loader {

2

   background: white;

3

   width: 30px;

4

   height: 30px;

5

   display: inline-block;

6

   position: absolute;

7

   right: 2rem;

8

   top: 1.2rem;

9

   animation: 0.5s infinite spin;

10

   border-radius: 50%;

11

   border-top: 5px solid black;

12

   border-bottom: 5px solid gray;

13

}

14

@keyframes spin {

15

   0% {

16

     transform: rotate(0deg);

17

   }

18

   100% {

19

      transform: rotate(360deg);

20

   }

21

}

22

23

section#content {

24

   width: 100% !important;

25

}

Para evitar a repetição, recomendo que você leia a postagem original para ver por que usei essa estrutura de marcação específica e as regras CSS se algo parecer confuso.

A imagem a seguir mostra como fica nossa página da Web depois que todo o CSS é aplicado:

Lidando com carregamento de página e cliques em links

É importante ter certeza de que nosso documento HTML foi totalmente analisado antes de começarmos a manipular o DOM. Fazemos isso ouvindo o DOMContentLoaded evento. Anexamos uma função de retorno de chamada a este ouvinte de evento que é executado assim que o DOMContentLoaded incêndios de eventos. Aqui está o nosso código inicial:

1

document.addEventListener("DOMContentLoaded", () => {

2

  const loader = document.querySelector(".loader");

3

  const content = document.getElementById("content");

4

  const navLinks = document.querySelectorAll("nav li a");

5

6

  loader.style.display = "none";

7

});

Neste ponto, estamos simplesmente usando o querySelector(), getElementById()e querySelectorAll() métodos para selecionar os elementos DOM necessários. Você pode ler nosso tutorial sobre como obter elementos por classe, ID, nome de tag ou outros seletores para aprender como esses métodos funcionam.

Inicialmente, queremos que o carregador fique oculto. Conseguimos isso simplesmente definindo o valor de display propriedade para none.

Coloque o seguinte código dentro da função callback agora:

1

const handleClick = (event) => {

2

    event.preventDefault();

3

4

    const loadURL = `${event.target.getAttribute("href")}`;

5

6

    content.style.display = "none";

7

    loader.style.display = "block";

8

9

    loadContent(loadURL);

10

11

    window.location.hash = event.target.getAttribute("href").slice(0, -5);

12

};

13

14

navLinks.forEach((link) => {

15

    link.addEventListener("click", handleClick);

16

});

Começamos definindo nosso manipulador de cliques. Dentro handleClicka primeira coisa que fazemos é impedir que a ação padrão aconteça chamando event.preventDefault(). Estamos usando uma função de seta para definir nosso manipulador de cliques, portanto, teremos que usar event.target em vez de this para acessar nosso elemento de link.

Obtemos o valor do href atributo do nosso link de navegação porque temos que passá-lo para o loadContent() funcionar um pouco mais tarde. Neste ponto, queremos ocultar o conteúdo atualmente visível na página da Web e começar a exibir o carregador. Fazemos isso alterando o valor da propriedade display.

Depois disso, passamos por todos os links armazenados dentro navLinks e adicione um ouvinte de evento de clique a eles. O handleClick o retorno de chamada é anexado a cada um desses ouvintes de evento ao mesmo tempo. Essa função será chamada toda vez que um desses links for clicado.

Definindo o loadContent() Método

Agora, precisamos definir o loadContent() função. Ele aceitará nossa URL como seu único parâmetro e, em seguida, fará uma solicitação AJAX usando a API Fetch.

1

const loadContent = (url) => {

2

    content.innerHTML = "";

3

    fetch(url)

4

      .then((response) => {

5

        if (response.ok) {

6

          return response.text();

7

        }

8

      })

9

      .then((html) => {

10

        const tempElement = document.createElement("div");

11

        tempElement.innerHTML = html;

12

        const extractedContent = tempElement.querySelector("#content").innerHTML;

13

        content.innerHTML = extractedContent;

14

        content.style.display = "block";

15

        loader.style.display = "none";

16

      });

17

};

Uma chamada para o fetch() método retorna um Promise objeto que resolve para o Response do nosso pedido uma vez que o servidor responde com cabeçalhos. Verificamos se a solicitação foi bem-sucedida verificando o valor do ok propriedade do response objeto. Retornamos o HTML da página da web como uma string usando o text() método se tudo estiver ok.

Você deve considerar a leitura de nosso tutorial sobre os fundamentos do Promise se tudo isso for novidade para você.

Agora que temos nosso HTML, fazemos outra chamada para then() passando nosso HTML retornado como um parâmetro. Neste ponto, queremos apenas extrair o conteúdo que está dentro do nosso section elemento com id content. Para fazer isso, criamos um elemento temporário com todo o nosso HTML e então chamamos o querySelector() método neste elemento para extrair o HTML que queremos.

Finalmente, definimos o display propriedade de nossa seção de conteúdo para bloquear e a propriedade de exibição do carregador para nenhum.

Adicionando animação ao conteúdo

Você deve ter notado que estamos simplesmente mudando o valor do display propriedade para o nosso #content elemento para qualquer um block ou none. Não há animação envolvida.

Agora você aprenderá como animar o conteúdo. A maneira mais fácil de fazer isso envolve o uso de CSS. Adicione as seguintes linhas ao seu estilo.css arquivo:

1

 #content.fade-in {

2

   overflow: hidden;

3

   animation: fadeInAnimation 0.4s forwards;

4

 }

5

6

 @keyframes fadeInAnimation {

7

   from {

8

     opacity: 0;

9

     max-height: 0;

10

   }

11

   to {

12

     opacity: 1;

13

     max-height: 100vh;

14

   }

15

 }

Simplesmente definimos uma animação de quadro-chave que anima tanto o opacity e a max-height properties para dar o mesmo efeito que nosso tutorial original. O importante a observar aqui é a forwards palavra-chave que fará nosso #content O elemento retém os valores computados finais.

Agora, basta adicionar o fade-in aula para o #content elemento usando a seguinte linha:

1

content.classList.add("fade-in");

Basta adicioná-lo abaixo da linha que define o conteúdo display propriedade para block.

Da mesma forma, você precisa remover o fade-in class do elemento de conteúdo usando a seguinte linha:

1

content.classList.remove("fade-in");

Pensamentos finais

Neste tutorial, aprendemos como carregar e animar conteúdo em uma página da Web usando um pouco de CSS e JavaScript básico. Isso é um pouco mais complicado em comparação com o uso do jQuery. No entanto, você pode se livrar da sobrecarga de baixar uma biblioteca inteira.

Agora, seja criativo e anime o conteúdo da página como quiser.