CSS geçişleri

Coddy'nin HTML Journey'sinin JavaScript Eylemde 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 uzmanlığı bölümünde ele alınmıştır). JavaScript'te yalnızca bir sınıf ekler veya kaldırır ya da stil özelliklerini değiştiririz.

HTML:

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

.box öğesinin opaklığı üzerinde bir geçiş vardır; bu nedenle .hidden sınıfı eklendiğinde (opaklığı 0 olarak ayarlar), kutu anında kaybolmak yerine yavaşça görünmez olur.

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

.hidden {
  opacity: 0;
}

Düğmeye tıklandığında kutu solar:

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

button.addEventListener("click", function () {
  // opaklık solar
  box.classList.toggle("hidden");
});

Görev

Kolay

Tıklandığında bir kutuyu gösteren/gizleyen bir geçiş düğmesi oluşturun.

Adımlar:

Şunları depolamak için iki değişken oluşturun:
- Geçiş düğmesi öğesi
- Soluk kutu öğesi
  Her ikisi için de document.getElementById() kullanın
Geçiş düğmesine bir tıklama olayı dinleyicisi ekleyin
Düğmeye tıklandığında, soluk kutu öğesindeki "hidden" sınıfını değiştirin

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>