Добавление и удаление классов для анимации

1. Свойство classList: ваш универсальный помощник

В HTML и CSS классы (class) — это основной способ группировать элементы и применять к ним стили. Например, можно описать в CSS красивую анимацию для класса .shake, и потом просто добавить этот класс к нужному элементу, чтобы он "затрясся" как будто ему показали счет за электричество.

Почему это удобно:

• Вся логика анимации и стилей описывается в CSS — код JS становится чище.
• Можно динамически добавлять и убирать классы в зависимости от действий пользователя (например, при клике или наведении).
• Легче поддерживать и расширять код: если нужно изменить анимацию, правим только CSS.

Аналогия:
Представьте, что у вас есть шкаф с костюмами (CSS-классы), а JavaScript — это ваш стилист, который по событию "вечеринка" надевает на вас блестящий пиджак (добавляет класс), а по событию "утро" — снимает его (удаляет класс).

В JavaScript для управления классами существует специальное свойство classList. Оно доступно у любого DOM-элемента и предоставляет методы для добавления, удаления, переключения и проверки наличия классов.

Выглядит это так:

const element = document.querySelector('.box');
element.classList.add('active');    // Добавить класс
element.classList.remove('active'); // Удалить класс
element.classList.toggle('active'); // Переключить: если был — уберёт, если не было — добавит
element.classList.contains('active'); // Проверить: есть ли класс?

Почему не просто element.className?
className — это строка, и если работать с ней вручную, легко случайно стереть все классы или добавить лишние пробелы. classList — это набор методов, которые делают всё аккуратно и безопасно.

2. Как добавить класс к элементу: classList.add

Допустим, у нас есть элемент:

<div id="myBox" class="box"></div>

И CSS:

.box {
  width: 100px;
  height: 100px;
  background: #ccc;
  transition: background 0.5s, transform 0.5s;
}
.highlight {
  background: gold;
  transform: scale(1.1) rotate(5deg);
}

Теперь добавим класс из JS:

const box = document.getElementById('myBox');
box.classList.add('highlight');

Что произойдёт:
Элемент плавно станет золотым и немного повернётся — всё благодаря CSS-анимации, которая срабатывает при появлении класса highlight.

Важно:
- Если класс уже есть — ничего страшного, add не добавит его второй раз.
- Можно добавить сразу несколько классов: element.classList.add('a', 'b', 'c');

3. Как убрать класс: classList.remove

Удалять класс так же просто:

box.classList.remove('highlight');

Результат:
Анимация плавно вернёт элемент к исходному состоянию.

Лайфхак:
Можно удалить несколько классов за раз: element.classList.remove('a', 'b');

4. Переключение класса: classList.toggle

Часто хочется, чтобы по клику класс то добавлялся, то убирался — для этого есть toggle:

box.classList.toggle('highlight');

• Если класса не было — добавит.
• Если был — уберёт.

Пример: сделать элемент "мерцающим" по клику

box.addEventListener('click', function() {
  box.classList.toggle('highlight');
});

Теперь каждый клик — это смена состояния.

5. Проверка наличия класса: classList.contains

Иногда нужно узнать: а есть ли у элемента определённый класс?

if (box.classList.contains('highlight')) {
  console.log('Уже подсвечено!');
}

Это полезно, если хотите делать разные действия в зависимости от состояния.

6. Пример: Анимируем кнопку "Показать/Скрыть"

Давайте соберём простой пример, который можно использовать в нашем учебном приложении.

HTML:

<button id="btn">Показать</button>
<div id="panel" class="panel"></div>

CSS:

.panel {
  width: 200px;
  height: 100px;
  background: #8ecae6;
  margin-top: 10px;
  opacity: 0;
  transform: translateY(-20px);
  pointer-events: none;
  transition: opacity 0.5s, transform 0.5s;
}
.panel.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

JavaScript:

const btn = document.getElementById('btn');
const panel = document.getElementById('panel');

btn.addEventListener('click', function() {
  panel.classList.toggle('visible');
  btn.textContent = panel.classList.contains('visible') ? 'Скрыть' : 'Показать';
});

Что происходит:
- При клике на кнопку к панели добавляется/убирается класс visible.
- CSS-анимация плавно показывает или скрывает панель.
- Текст на кнопке меняется в зависимости от состояния.

7. Краткая практика: делаем "тряску" по клику

HTML:

<button id="shakeBtn">Потрясти коробку</button>
<div id="shakeBox" class="box"></div>

CSS:

@keyframes shake {
  0% { transform: translateX(0); }
  20% { transform: translateX(-10px); }
  40% { transform: translateX(10px); }
  60% { transform: translateX(-10px); }
  80% { transform: translateX(10px); }
  100% { transform: translateX(0); }
}
.box {
  width: 100px;
  height: 100px;
  background: #bde0fe;
  margin-top: 10px;
}
.shake {
  animation: shake 0.5s;
}

JavaScript:

const shakeBtn = document.getElementById('shakeBtn');
const shakeBox = document.getElementById('shakeBox');

shakeBtn.addEventListener('click', function() {
  shakeBox.classList.add('shake');
  
  // Убираем класс после окончания анимации, чтобы можно было "трясти" снова
  shakeBox.addEventListener('animationend', function handler() {
    shakeBox.classList.remove('shake');
    shakeBox.removeEventListener('animationend', handler);
  });
});

Почему так?
Если не убрать класс после анимации, следующий клик не запустит анимацию заново. Поэтому мы слушаем событие animationend, чтобы вовремя удалить класс.

8. Для чего ещё удобно использовать классы

• Сложные анимации: hover, focus, active можно эмулировать через классы.
• Состояния элементов: например, "открыто/закрыто" меню, "выбран" элемент, "ошибка" в форме.
• Темизация: переключение темы сайта (тёмная/светлая) — часто реализуется через добавление класса к <body>.

9. Типичные ошибки при работе с классами и анимациями

Ошибка №1: Забыли убрать класс после анимации.
Если добавить класс, который запускает анимацию, и не убрать его после окончания, следующий запуск не сработает. Это частая ловушка для новичков. Решение — использовать событие animationend или transitionend для удаления класса.

Ошибка №2: Оперируем с className вместо classList.
Если вы случайно пишете element.className = 'new-class', вы стираете все существующие классы. Лучше всегда использовать classList.add и другие методы, чтобы не потерять нужные стили.

Ошибка №3: Путаем имена классов.
В JS и CSS имена классов должны совпадать до буквы! Если в CSS .Highlight, а в JS 'highlight', ничего не сработает. Лучше копировать имена классов прямо из CSS.

Ошибка №4: Забыли про CSS-анимацию или transition.
Если в CSS не прописана анимация или переход, добавление класса не даст никакого эффекта — элемент просто мгновенно поменяет стиль.

Ошибка №5: Слишком много логики в JS.
Старайтесь описывать анимации и визуальные эффекты в CSS, а в JS — только добавлять/удалять классы. Это упростит поддержку и сделает код чище.