Создание боковой панели ⇐ CSS

[Anonymous]

Я хочу создать боковую панель, которая при нажатии на гамбургер-меню перемещается вправо с левой стороны, и на странице освобождается место для нее. Я создал что-то очень близкое к тому, что хотел, но у меня проблемы с анимацией

Код: Выделить всё

const btnToggleSideBar = document.querySelector(".btn-toggle-sidebar")
const sideBar = document.querySelector(".side-bar");
const containerBefore = document.querySelector(".before");

btnToggleSideBar.onclick = (e) => {
containerBefore.classList.toggle("hide");
sideBar.classList.toggle("hidden");
};

Код: Выделить всё

button {
cursor: pointer;
}

.cont-outer {
display: flex;
position: relative;
height: 150px;
width: 550px;
}

.side-bar {
background-color: red;
transition: transform 1000ms ease;
position: absolute;
inset: 0 75% 0 0;
z-index: 1;
}

.side-bar.hidden {
transform: translateX(-100%);
}

.cont-inner {
display: flex;
flex-grow: 1;
}

/* this is here to just push the main content to the right so that the sidebar doesn't cover the main page*/
.before {
flex-grow: 1;
background-color: #a3a3a3;
transition: flex-grow 1000ms ease;
}

/* let main page to take entire space when side bar is moved to the left */
.before.hide {
flex-grow: 0;
}

.main-page {
background-color: blue;
flex-grow: 3;
}

Код: Выделить всё

toggle sidebar


[h4]list of items[/h4]
[list]
[*]apples
[*]oranges
[*]pineapples
[/list]

Когда вы скрываете боковую панель во время анимации, вы можете видеть .before



Когда вы скрываете боковую панель во время анимации, вы можете увидеть .before



Когда вы скрываете боковую панель во время анимации, вы можете увидеть .before дел. Чего я не хочу, чтобы произошло. .before сжимается медленнее, чем боковая панель перемещается влево, хотя и боковая панель, и элемент div .before имеют одинаковое время анимации и стиль анимации< /п>

Подробнее здесь: https://stackoverflow.com/questions/784 ... -a-sidebar