CSS transition

Thuộc phần JavaScript trong thực tế trong hành trình HTML của Coddy. Bài học 18 trên 27.

Đôi khi, chúng ta muốn tạo hiệu ứng động mượt mà, như mờ dần, trượt hoặc đổi kích thước, khi một phần tử xuất hiện hoặc biến mất.
Chúng ta dùng hiệu ứng chuyển tiếp CSS cho việc đó, nội dung này đã có trong phần làm chủ CSS. Trong JavaScript, chúng ta chỉ cần thêm hoặc xóa một lớp, hoặc thay đổi các thuộc tính trong style.css.

HTML:

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

.box có hiệu ứng chuyển tiếp cho độ mờ, nên khi thêm lớp .hidden (lớp này đặt độ mờ thành 0), hộp sẽ mờ dần thay vì biến mất ngay lập tức.

.box {
  width: 100px;
  height: 100px;
  background-color: teal;
  transition: opacity 0.5s ease; /* khi chuyển đổi lớp */
  opacity: 1;
}

.hidden {
  opacity: 0;
}

Khi nhấn nút, hộp sẽ mờ dần:

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

button.addEventListener("click", function () {
  // Độ mờ giảm dần
  box.classList.toggle("hidden");
});

Thử thách

Dễ

Tạo một nút bật/tắt để hiện hoặc ẩn hộp khi được nhấp.

Các bước:

Tạo hai biến để lưu:
- Phần tử nút bật/tắt
- Phần tử hộp mờ dần
  Dùng document.getElementById() cho cả hai
Thêm trình lắng nghe sự kiện nhấp vào nút bật/tắt
Khi nhấp vào nút, bật hoặc tắt lớp "hidden" trên phần tử hộp mờ dần

Tự làm thử

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