Transisi CSS

Termasuk bagian JavaScript dalam Aksi dalam perjalanan HTML di Coddy. Pelajaran 18 dari 27.

Terkadang kita ingin membuat animasi yang halus (seperti memudar, bergeser, atau berubah ukuran) saat elemen muncul atau menghilang.
Kita menggunakan transisi CSS untuk itu (dibahas di bagian penguasaan CSS). Di JavaScript, kita cukup menambahkan atau menghapus class, atau mengubah property style.

HTML:

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

.box memiliki transisi pada opasitasnya, jadi saat class .hidden ditambahkan (yang mengatur opasitas menjadi 0), kotak memudar alih-alih langsung menghilang.

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

.hidden {
  opacity: 0;
}

Saat tombol diklik, kotak memudar:

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

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

Tantangan

Mudah

Buat tombol toggle yang menampilkan/menyembunyikan kotak saat diklik.

Langkah-langkah:

Buat dua variabel untuk menyimpan:
- Elemen tombol toggle
- Elemen kotak fade
  Gunakan document.getElementById() untuk keduanya
Tambahkan event listener klik ke tombol toggle
Saat tombol diklik, aktifkan atau nonaktifkan class "hidden" pada elemen kotak fade

Coba sendiri

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