Transições CSS

Parte da seção JavaScript em Ação do Journey de HTML da Coddy. Lição 18 de 27.

Às vezes, queremos criar animações suaves (como esmaecer, deslizar ou redimensionar) quando um elemento aparece ou desaparece.
Para isso, usamos transições CSS (abordadas na seção de aprofundamento em CSS). Em JavaScript, simplesmente adicionamos ou removemos uma classe, ou modificamos propriedades de estilo.

HTML:

<button id="toggleBtn">Toggle Box</button>
<div id="box" class="box"></div>

A .box tem uma transição em sua opacidade, então, quando a classe .hidden é adicionada (o que define a opacidade como 0), a caixa desaparece gradualmente em vez de sumir instantaneamente.

.box {
  width: 100px;
  height: 100px;
  background-color: teal;
  transition: opacity 0.5s ease; /* para alternar a classe */
  opacity: 1;
}

.hidden {
  opacity: 0;
}

Quando o botão é clicado, a caixa desaparece gradualmente:

const button = document.getElementById("toggleBtn");
const box = document.getElementById("box");

button.addEventListener("click", function () {
  // a opacidade diminui gradualmente
  box.classList.toggle("hidden");
});

Desafio

Fácil

Crie um botão de alternância que mostra/oculta uma caixa quando clicado.

Etapas:

Crie duas variáveis para armazenar:
- O elemento do botão de alternância
- O elemento da caixa com efeito de esmaecimento
  Use document.getElementById() para ambos
Adicione um ouvinte de evento de clique ao botão de alternância
Quando o botão for clicado, alterne a classe "hidden" no elemento da caixa com efeito de esmaecimento

Experimente você mesmo

<!DOCTYPE html>
<html>
<head>
  <title>Fade Toggle Example</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <h1>Smooth Fade Example</h1>
    <p>Click the button below to toggle the fading box.</p>
    <button id="toggleBtn">Toggle Box</button>

    <div id="fadeBox" class="box">
      <p>This box fades in and out smoothly!</p>
    </div>
  </div>

  <script src="script.js"></script>
</body>
</html>