Задать вопрос
Stasy11
@Stasy11
The best epta
javascript

Как добавить плавности событию toggle в js?

Пожалуйста, подскажите как сделать так чтобы при замене css классов это происходило плавно?
При замене col-lg-9 на col-lg-12 панели плавно растягивались и обратно. Такое возможно?
Вот строки кода:
$(function () {
    document.querySelector('#btnSwitch').addEventListener('click', function() {
      const c = document.querySelector('#cont').classList;
      c.toggle('col-lg-9');
      c.toggle('col-lg-12');
    document.querySelector('#sid').classList.toggle('d-none');
    document.querySelector('#cont').classList.toggle('sid');
    });
  })

Спасибоо!!!
  • Вопрос задан
  • 696 просмотров
3 комментария
Подписаться 1 Средний 3 комментария
Решения вопроса 1
@Xrumka
Доброго времени суток! Для того что бы задать плавность изменения(скорость анимации) используется CSS свойство transitions.
Для решения данной задачи можно поступить следующим образом: 
$(function () {
    const targetCont= document.querySelector('#cont');
    targetCont.style.transition= 'all 3s';
    document.querySelector('#btnSwitch').addEventListener('click', function() {
      const c= targetCont.classList; 
      c.toggle('col-lg-9');
      c.toggle('col-lg-12');
    document.querySelector('#sid').classList.toggle('d-none');
    document.querySelector('#cont').classList.toggle('sid');
    });
  })
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
summer • Ярославль
от 100 000 до 140 000 ₽
Junior JavaScript Developer
КРАФТТЕК • Санкт-Петербург
от 60 000 до 80 000 ₽
JavaScript разработчик
Мэтч
от 80 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Взлом автомобильной программы
19 апр. 2024, в 05:01
999999 руб./за проект
Доработать телеграм бота
19 апр. 2024, в 03:52
1000 руб./за проект
Написать код на python
19 апр. 2024, в 03:01
1000 руб./за проект
Ещё заказы