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 desvanecer, deslizar ou redimensionar) quando um elemento aparece ou desaparece.
Usamos transições CSS para isso (abordadas na seção de domínio de 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, portanto, quando a classe .hidden é adicionada (o 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; /* for class toggle */
  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 () {
  // opacidade desvanece
  box.classList.toggle("hidden");
});

Desafio

Fácil

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

Etapas:

Crie duas variáveis para armazenar:
- O elemento do botão de alternância
- O elemento da caixa de desvanecimento
  Use document.getElementById() para ambos
Adicione um listener 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 desvanecimento

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>