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 ustalığı 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ığı geçişli olduğundan, .hidden sınıfı eklendiğinde (opaklığı 0 olarak ayarlar), kutu aniden kaybolmak yerine yavaşça görünmez olur.

.box {
  width: 100px;
  height: 100px;
  background-color: teal;
  transition: opacity 0.5s ease; /* sınıf değiştirme için */
  opacity: 1;
}

.hidden {
  opacity: 0;
}

Düğmeye tıklandığında kutu yavaşça kaybolur:

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

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

Görev

Kolay

Tıklandığında bir kutuyu gösterip gizleyen bir geçiş düğmesi oluştur.

Adımlar:

Şunları saklamak için iki değişken oluştur:
- Geçiş düğmesi öğesi
- Solma kutusu öğesi
  Her ikisi için de document.getElementById() kullan
Geçiş düğmesine bir tıklama olayı dinleyicisi ekle
Düğmeye tıklandığında, solma kutusu öğesindeki "hidden" sınıfını açıp kapat

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>