CSS transition not working with classList.add

Question

Good, I’ve been an hour and I’m going crazy (I’m new) I have a button that when pressed shows a div . Fixed sidemenu, this occupies 100% high and wide and contains two divs, one that does black background with some transparency and occupies everything and a white side menu. I want that when you activate the open button or the close button or touch the black background transparently, the background and menu appear or disappear but with a transition and I do not know why it does not work, the menu with a side transition and the menu going from 0 to . 2 of opacity or vice versa when closed

See if anyone can explain why it does not work, thank you very much in advance :)

const sidemenu = document.getElementById('sidemenu')
const sidemenuContent = document.getElementById('sidemenu__content')
const abrirSidemenu = document.getElementById('sidemenu__open')
const cerrarSidemenu = document.getElementById('sidemenu__close')
const sidemenubg = document.getElementById('fondo-modal')


abrirSidemenu.addEventListener('click', () => {
  sidemenu.classList.add('show-sidemenu')
  sidemenuContent.classList.add('sidemenuContent__animation')
  sidemenubg.classList.add('opacity__animation')
})
cerrarSidemenu.addEventListener('click', () => {
  sidemenu.classList.remove('show-sidemenu')
  sidemenuContent.classList.remove('sidemenuContent__animation')
  sidemenubg.classList.remove('opacity__animation')
})
sidemenubg.addEventListener('click', () => {
  sidemenu.classList.remove('show-sidemenu')
  sidemenuContent.classList.remove('sidemenuContent__animation')
  sidemenubg.classList.remove('opacity__animation')
})

.sidemenu {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.fondo-modal {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 5;
  background-color: black;
  opacity: .0;
  transition: .5s;
}

.sidemenu__content {
  position: fixed;
  top: 0;
  left: -350px;
  width: 350px;
  height: 100%;
  background-color: white;
  z-index: 10;
  padding: 5rem 2rem 0;
  overflow-y: auto;
  transition: .5s;
}

.show-sidemenu {
  display: grid;
}

.sidemenuContent__animation {
  left: 0;
}

.opacity__animation {
  opacity: .2;
}

<div class="topmenu__left">
  <button id="sidemenu__open">OPEN</button>
  <div class="sidemenu" id="sidemenu">
    <div class="fondo-modal" id="fondo-modal"></div>
    <div class="sidemenu__content" id="sidemenu__content">
      <button id="sidemenu__close">CLOSE</button>
    </div>
  </div>