Запуск CSS-переходов и анимаций через классы в JavaScript

JavaScript не обязан менять стили по шагам. Он добавляет или удаляет CSS-класс, а CSS запускает переход или анимацию.

• Как работают классы
• CSS-переход через класс
• CSS-анимация через класс
• Что выбрать
• Итого

Как работают классы

В базовом CSS-классе задают обычный вид элемента, а в классе состояния - то, что должно измениться. JavaScript меняет только класс, поэтому правила оформления остаются в CSS.

CSS-переход через класс

<button class="save-button">Сохранить</button>

.save-button {
  padding: 8px 12px;
  color: #fff;
  background-color: #4a5568;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.save-button.is-saved {
  background-color: #2f855a;
}

const saveButton = document.querySelector('.save-button');

saveButton.classList.add('is-saved');

После добавления класса браузер плавно изменит цвет кнопки. saveButton.classList.remove(‘is-saved’) вернёт исходный цвет тем же переходом.

Свойство transition лучше указывать в базовом классе. Тогда переход сработает и при добавлении, и при удалении класса. Браузер плавно меняет только свойства, перечисленные в transition.

CSS-анимация через класс

<p class="notice">Настройки сохранены</p>

.notice {
  padding: 12px;
  background-color: #edf2f7;
}

.notice.is-highlighted {
  animation: highlight 0.5s ease;
}

@keyframes highlight {
  50% {
    background-color: #fefcbf;
  }
}

const notice = document.querySelector('.notice');

notice.classList.add('is-highlighted');

@keyframes описывает шаги анимации, а класс её запускает. В середине анимации фон уведомления станет жёлтым, а затем вернётся к цвету из базового класса.

Что выбрать

Переход подходит для плавного изменения между двумя состояниями элемента. Анимация подходит для заранее заданной последовательности действий, например короткого выделения уведомления. В обоих случаях JavaScript меняет класс через classList.add(), classList.remove() или classList.toggle().

Итого

Чтобы запустить CSS-переход или анимацию, JavaScript меняет класс элемента. Для плавного перехода используйте transition, а для последовательности кадров - @keyframes и animation.