CSS-переходы

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

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

HTML:

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

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

.box {
  width: 100px;
  height: 100px;
  background-color: teal;
  transition: opacity 0.5s ease; /* для переключения класса */
  opacity: 1;
}

.hidden {
  opacity: 0;
}

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

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

button.addEventListener("click", function () {
  // прозрачность уменьшается
  box.classList.toggle("hidden");
});

Задание

Легко

Создайте кнопку переключения, которая показывает или скрывает блок при нажатии.

Шаги:

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

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

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