Как реализовать плавный toggle на моем menu?

Question

[howuu]

У меня есть меню, которое при нажатии на кнопку присваивает классы элементам, меняет их margin и появляется и
прячется и я хочу сделать этот процесс плавным, как мне это реализовать?

document.getElementById("nav-burger").onclick = function () {
    document.getElementById("body").classList.toggle("push-right");
    document.getElementById("ul-actions").classList.toggle("flex-display");
};

document.getElementById("nav-burger-right").onclick = function () {
    document.getElementById("all_body").classList.toggle("push-left");
    document.getElementById("ul-actions-right").classList.toggle("flex-display");
};

.push-right {
  margin-left: 300px; }

.push-left {
  margin-right: 300px; }

Comments

[Андрей Hecc]

Для анимирования используйте лучше свойство transform: translate( x, y );
Изменение margin будет влиять на позиционирование других элементов и вызывать их перерисовку, даже если визуально, они не сдвинутся с места

Answer 1

[Eugene Chefranov]

.push-right {
  margin-left: 300px; 
transition: all 1s;
}

.push-left {
  margin-right: 300px;
transition: all 1s;
 }

Comments

[howuu]

Спасибо, все оказалось просто