Переходы CSS

Часть раздела JavaScript в действии путешествия по HTML на Coddy. Урок 18 из 27.

Иногда мы хотим создавать плавные анимации (например, исчезновение, скольжение или изменение размера), когда элемент появляется или исчезает.
Для этого мы используем переходы CSS (это рассматривается в разделе по углублённому изучению CSS). В JavaScript мы просто добавляем или удаляем класс либо изменяем свойства style.

HTML:

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

У .box есть переход для его прозрачности, поэтому, когда добавляется класс .hidden (который устанавливает прозрачность равной 0), box плавно исчезает, а не пропадает мгновенно.

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

.hidden {
  opacity: 0;
}

При нажатии на кнопку — box плавно исчезает:

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

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

Задание

Легко

Создайте toggle-кнопку, которая показывает или скрывает box при нажатии.

Шаги:

Создайте две переменные для хранения:
- элемента toggle-кнопки
- элемента box с эффектом затухания
  Используйте document.getElementById() для обоих элементов
Добавьте обработчик события click для toggle-кнопки
При нажатии кнопки переключайте класс "hidden" у элемента box с эффектом затухания

Попробуйте сами

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