Реверс CSS анимации при удалении класса: решение проблемы

Быстрый ответ

Вы хотите показать CSS-анимацию в обратном направлении при удалении класса? Применяйте свойство animation-direction: reverse.

.element:hover {
  animation: slideIn 1s forwards;
}

.element.reverse {
  animation: slideIn 1s reverse both;
}

@keyframes slideIn {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

Для активации анимации в обратном направлении измените класс с помощью JavaScript:

const el = document.querySelector('.element');
el.addEventListener('mouseleave', () => el.classList.toggle('reverse'));

Свойство reverse в animation-direction в сочетании с animation-fill-mode: both позволит элементу возвращаться в исходное положение при изменении класса.

Усовершенствуем: добавим плавность и контролируем обратное воспроизведение

Если вы хотите улучшить обратное воспроизведение анимации и добавить дополнительные эффекты, следуйте нижеуказанным рекомендациям.

Больше плавности с ease-in-out

Для более плавного изменения применяйте функцию ease-in-out. Это обеспечит мягкое начало и окончание анимации:

.element {
  animation-timing-function: ease-in-out;
}

Подробнее об этом расскажет наш спикер на видео

Управляем точкой вращения с помощью transform-origin

Добавьте нюансы в вашу анимацию, контролируя точку вращения с использованием transform-origin:

.element {
  transform-origin: top left;
}

У вас в руках JavaScript или jQuery. Выбор за вами!

Выберите тот инструмент, который вам более по душе, для переключения классов. Вот примеры, как это можно сделать с помощью чистого JavaScript и jQuery:

// Вариант на JavaScript
const el = document.querySelector('.element');

el.addEventListener('mouseover', () => {
  el.classList.add('animate-forwards');
});

el.addEventListener('mouseout', () => {
  // Принудительно обновляем весь поток для устранения мерцания!
  void el.offsetWidth;
  el.classList.replace('animate-forwards', 'animate-backwards');
});

// Вариант на jQuery
$('.element').on({
  mouseenter: function() {
    $(this).addClass('animate-forwards');
  },
  mouseleave: function() {
    // Требуется обновление потока элемента!
    void $(this)[0].offsetWidth;
    $(this).removeClass('animate-forwards').addClass('animate-backwards');
  }
});

Подробности управления анимациями

Давайте разберемся с основами CSS и JavaScript, чтобы сделать наши анимации еще более интерактивными.

Сохранение стабильности стиля элемента

Приятное взаимодействие с пользователем во многом зависит от стабильности стиля элемента. Все параметры, такие как интерлиньяж, цвет и размер шрифта, должны оставаться неизменными для поддержания гармонии в визуальном представлении:

.element {
  /* Статичные стили свойств */
  line-height: 1.5;
  color: #333;
  font-size: 18px;
  /* Плавность перехода цвета */
  transition: color 1s;
}

Возможности библиотеки Animate.css

Animate.css — это мощный помощник в области анимаций, который позволит проигрывать их, добавляя классы:

<link rel="stylesheet" href="animate.min.css" />
<div class="element animated infinite">Ваш контент</div>

Спокойной силы псевдокласса :hover

В тех случаях, когда вам нужно минимум лишних деталей, псевдокласс :hover станет вашим незаменимым помощником. Сочетание его с JavaScript обеспечит еще большую плавность ваших анимаций:

.element:hover {
  animation: slideIn 1s forwards;
}

Визуализация

Сравним анимацию с танцем:

Прежде, чем удалить класс: 🕺💃👯‍ (Танец в самом разгаре) После удаления класса: 🎭➡️💺 (Анимация поставлена на паузу)

Сцена без класса: [🕺🪑, 💃🪑, 👯‍🪑]

Анимации ждут своего часа!

Добавление класса для обратного проигрывания анимации: 🔄🕺💃👯‍

Начинается обратное воспроизведение!

Визуализируйте это, как флипбук: Анимация вперед 📖→, Анимация назад 📖←

Полезные материалы

1. Использование CSS-анимаций – MDN Web Docs — обстоятельное руководство по работе с CSS-анимациями.
2. Свойство CSS animation-fill-mode – W3Schools — информация о влиянии свойства animation-fill-mode на анимацию до ее начала и после окончания.
3. Управление CSS-анимациями и переходами с помощью JavaScript – CSS-Tricks — полезные советы о том, как управлять CSS-анимациями и переходами через JavaScript.
4. Animate.css | Кроссбраузерная библиотека CSS-анимаций — подборка готовых анимаций для быстрого использования.
5. Can I use... Справочник по поддержке HTML5, CSS3 и других веб-технологий. — сервис для проверки поддержки CSS-анимаций различными браузерами.
6. Использование CSS переходов – CSS: Cascading Style Sheets | MDN — детальное руководство по созданию CSS переходов от MDN.
7. CSS – Анимации – TutorialsPoint — обучающий курс, помогающий новичкам освоить свойства CSS-анимаций.