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

Question

[Stacy None]

Пожалуйста, подскажите как сделать так чтобы при замене 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');
    });
  })

Спасибоо!!!

Comments

[skuvaWeb]

Скорее всего вам нужно это

[Stacy None]

skuvaWeb, Нет( Мне нужно чтобы именно при нажатии кнопки toggle была плавность, но не постоянно

[Сергей delphinpro]

1. это не событие, а метод
2. это дискретный метод, добавление класса нельзя анимировать в принципе.

но вы можете анимировать какие-то другие стили элементов при смене классов. для это нужно воспользоваться css переходами (transition)

Answer 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');
    });
  })