Hamburger menu "shakes" upon resizing the browser window

Question

Upon resizing the browser window opposite the direction towards which the menu slides, you can clearly see it appearing and disappearing. It's like a "shaking" effect that shakes the menu out of its default position. On mobile you can slightly see it rotate while switching from portrait to landscape.

My CSS:

#menuSlideBox {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: 80vw;
    background-color: var(--color-accent);
    transition: transform 0.3s ease;
}

#menuSlideBox.hidden {
    right: -80;
}

My JS:

const menuSlideShape = document.getElementById("menuSlideShape");

// GENERATES THE SLIDING MENU
const menuSlideBox = document.createElement("div");
menuSlideBox.id = "menuSlideBox";
menuSlideBox.style.transform = "translate(80vw)"; // Initially position the menu slide box outside the viewport

const closeMenu = document.createElement("button");
closeMenu.textContent = "Close";
closeMenu.id = "closeMenu";

menuSlideShape.addEventListener("click", function slideLeft() {
    menuSlideBox.style.transform = "translate(0)"; // Slide into view
});

closeMenu.addEventListener("click", function slideRight() {
    menuSlideBox.style.transform = "translate(80vw)"; // Slide out of view
});

document.body.appendChild(menuSlideBox);
menuSlideBox.appendChild(closeMenu);

I have replaced transition: transform 0.3s ease; with right, but that fixes the "shaking" while also removing the transition effect. There must be an easy way to fix this. With the current approach I can either hide the menu upon resizing, or keep the transition effect.