Переходы CSS

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

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

HTML:

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

Для .box задан переход для свойства непрозрачности, поэтому при добавлении класса .hidden (который задаёт непрозрачность 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>