Transições CSS

Parte da seção JavaScript in Action do Journey de HTML da Coddy — lição 18 de 27.

Às vezes, queremos criar animações suaves (como esmaecimento, deslizamento ou redimensionamento) quando um elemento aparece ou desaparece.
Usamos transições CSS para isso (abordado na seção de domínio de CSS). No JavaScript, simplesmente adicionamos ou removemos uma classe — ou modificamos as propriedades de estilo.

HTML:

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

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

.box {
  width: 100px;
  height: 100px;
  background-color: teal;
  transition: opacity 0.5s ease; /* para alternância de 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 desaparece gradualmente
  box.classList.toggle("hidden");
});

Desafio

Fácil

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

Passos:

Crie duas variáveis para armazenar:
- O elemento do botão de alternância
- O elemento da caixa de fade
  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 de fade

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>