CSS geçişleri

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 (kararma, kayma veya yeniden boyutlandırma gibi) pürüzsüz animasyonlar oluşturmak isteriz.
Bunun için CSS geçişlerini (CSS mastery bölümünde ele alınmıştır) kullanırız. JavaScript'te sadece bir sınıf ekler veya kaldırırız ya da stil özelliklerini değiştiririz.

HTML:

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

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

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

.hidden {
  opacity: 0;
}

Butona tıklandığında - kutu solar:

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

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

Görev

Kolay

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

Adımlar:

Şunları saklamak için iki değişken oluşturun:
- Geçiş düğmesi öğesi
- Fade kutusu öğesi
  Her ikisi için de document.getElementById() kullanın
Geçiş düğmesine bir tıklama olayı dinleyicisi (click event listener) ekleyin
Düğmeye tıklandığında, fade kutusu öğesi üzerinde "hidden" sınıfını değiştirin (toggle)

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>