CSS transitions

Coddy'nin HTML Journey'sinin JavaScript in Action bölümünün bir parçası. Ders 18 / 27.

Bazen bir öğe göründüğünde veya kaybolduğunda yumuşak animasyonlar (solma, kayma veya yeniden boyutlandırma gibi) oluşturmak isteriz.
Bunun için CSS geçişlerini kullanırız (CSS mastery bölümünde ele alınmıştır). JavaScript'te yalnızca bir class ekler veya kaldırır ya da style özelliklerini değiştiririz.

HTML:

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

.box öğesinde opacity için bir transition vardır; bu nedenle .hidden class'ı eklendiğinde (opacity değerini 0 olarak ayarlar), box aniden kaybolmak yerine fades out.

.box {
  width: 100px;
  height: 100px;
  background-color: teal;
  transition: opacity 0.5s ease; /* for class toggle */
  opacity: 1;
}

.hidden {
  opacity: 0;
}

button tıklandığında - box solar:

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

button.addEventListener("click", function () {
  // opacity fades
  box.classList.toggle("hidden");
});

Görev

Kolay

Tıklandığında bir kutuyu gösteren/gizleyen bir toggle button oluşturun.

Adımlar:

Şunları depolamak için iki değişken oluşturun:
- toggle button öğesi
- Fade kutusu öğesi
  Her ikisi için de document.getElementById() kullanın
toggle button öğesine bir click olay dinleyicisi ekleyin
button tıklandığında, Fade kutusu öğesindeki "hidden" class'ını toggle edin

Kendin dene

<!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>