CSS переход не работает в мобильном меню

Question

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

HTML

<div class="nav-container">
<nav class="main-nav">
    <div class="main-nav__logo"><a href="#">Dógui</a></div>
    <div class="main-nav__navbar">
        <i class="fas fa-bars"></i>
        <div class="navbar__mobile__bg">
            <ul class="navbar__mobile">
                <div class="navbar__mobile__logo">Dógui</div>
                <li class="close-button">&times;</li>
                <li class="navbar__mobile__item"><a href="#">About Us</a></li>
                <li class="navbar__mobile__item"><a href="#">Services</a></li>
                <li class="navbar__mobile__item"><a href="#">Team</a></li>
                <li class="navbar__mobile__item"><a href="#">Contact</a></li>
            </ul>
        </div>
    </div>
</nav>
</div>

CSS

.navbar__mobile__logo {
  font-family: 'Aladin';
  font-size: 2.5rem;
  color: #edb306;
  position: absolute;
  top: 10px;
  left: 32px;
}

.navbar__mobile__bg {
  background-color: rgba(0,0,0,.6);
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  display: none;
}

.navbar__mobile {
  display: none;
  color: #444;
  position: fixed;
  top: 0;
  left: 0;
  background-color: #fff;
  height: 100%;
  width: 300px;
  opacity: .95;
  padding-top: 5rem;
  font-size: 1.2rem;
  padding-left: 2rem;
  margin-left: -300px;
  transition: margin-left 1s;
}

.navbar__mobile__item {
  padding: 1.2rem 0 1.2rem 0;
}

.close-button {
  cursor: pointer;
  position: absolute;
  font-size: 2.5rem;
  padding-right: 1rem;
  color: #edb306;
  top: 10px;
  right: 0;
}

Javascript

//selecting elements
let openButton = document.querySelector('.fa-bars');
let closeButton = document.querySelector('.close-button');
let navbarMobile = document.querySelector('.navbar__mobile');

//open menu
openButton.addEventListener('click', openMenu);

//close menu
closeButton.addEventListener('click', closeMenu);

//defining the functions
function openMenu(){
  document.querySelector('.navbar__mobile__bg').style.display = 'block';
  navbarMobile.style.display = 'block';
  navbarMobile.style.marginLeft = '0';
}
function closeMenu(){
  document.querySelector('.navbar__mobile__bg').style.display = 'none';
  navbarMobile.style.display = 'none';
  navbarMobile.style.marginLeft = '-300px';
}

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

Спасибо.