Why is my CSS animation skipped when using classes and javscript to add elements to the class

This is my first time using CSS animation and what I’m trying to achieve is to have this title bar to shrink out of the way of a sidebar from 100% of the width of the screen (100vw) to 75vw. I’m running this in vanilla CSS and Javascript, there are only two divs under the body in html (topDiv and sidebarDiv) and the issue that I’m facing is that the title bar shrinking animation is not running, the sidebar animation works fine.

The effect that should be achieved is that the sidebar ‘pushes’ the top title bar out of the way when the menubutton (on the title bar) is clicked. The issue I’m encountering is that the animation does not run and that there is a space between the title bar and sidebar until the sidebar finishes its animation and fills in the space between the title bar and the sidebar. Here’s my CSS and JavaScript code:

@keyframes openingSidebar {
    from{transform: translateX(-100%);}
    to{transform: translateX(0%);}
}

@keyframes openingSidebarTitle {
    from{width:100vw;}
    to{width:75vw;}
}

#topDiv {
    background-color: #A167A5;
    height:6vw;
    width:100vw;
}

#textContainer{
    display: flex;
    justify-content: left;
    align-items: center;
    height: 5vw;
}

.sidebar {
    display:none;
    background-color:#A167A5;
    color:#E8D7F1;
    height:100vw;
    width: 20vw;
    overflow:hidden;
    transform: translateX(-100%);
    padding-left:2.5vw;
    padding-right:3vw;
}

.animatedSidebar {
    animation-name: openingSidebar;
    animation-duration:1s;
    animation-timing-function:linear;
}

.shrinkTopBar {
    animation-name:openingSidebarTitle;
    animation-duration:1s;
    animation-timing-function:linear;
}

var sidebarClickedCounter = 0;
var sidebar = document.getElementById("sidebarDiv");
var titleBar = document.getElementById("topDiv");
var sidebarOpen = false;

function openSideMenu(){
    // false = open, true = close  
    if(sidebarClickedCounter % 2){
        console.log("Close sidebar command.")
        sidebar.classList.remove("animatedSidebar");
        titleBar.classList.remove("shrinkTopBar");
        sidebar.style.display = "none";

        titleBar.style.width = "100vw";
        sidebarOpen = false;
    } else {
        console.log("open sidebar command.")
        sidebar.style.display = "flex";
        sidebar.classList.add("animatedSidebar");
        titleBar.classList.add("shrinkTopBar");

        sidebar.style.transform = "translate(0%, 0%)";
        titleBar.style.width = "75vw";
        sidebarOpen = true;
    }
    sidebarClickedCounter++;
}