CSS transition not working with classList.add-CodePudding

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 >
  <button id="sidemenu__open">OPEN</button>
<div  id="sidemenu">
  <div  id="fondo-modal"></div>
  <div  id="sidemenu__content">
    <button id="sidemenu__close">CLOSE</button>
  </div>
</div>

CodePudding user response：

The major issue is that you're trying to transition the display attribute, which cannot be transitioned: https://www.w3schools.com/cssref/pr_class_display.asp So instead, we'll define your display attribute as you like but we'll add the opacity and visibility attributes and make those our goal for transition. We'll also specify a timing operation with linear which you can change at your discretion (see: https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function) and we'll transition everything for the sake of keeping it simple since you don't have any real need for specificity here. Hope that helps, let me know if you have any questions :)

Edit: added a light-blue to the body just so you can see everything happening but you can take that out obviously.

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');
});

body {
  background-color: lightblue;
}

.sidemenu {
  display: grid;
  visibility: hidden;
  position: fixed;
  top: 0;
  left: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  transition: all 0.5s linear;
}

.fondo-modal {
  display: block;
  position: absolute;
  visibility: hidden;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 5;
  background-color: black;
  opacity: 0;
  transition: all 0.5s linear;
}

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

.show-sidemenu {
  visibility: visible;
  opacity: 1;
  left: 0;
  transition: all 0.5s linear;
}

.sidemenuContent__animation {
  visibility: visible;
  left: 0;
  transition: all 0.5s linear;
}

.opacity__animation {
  visibility: visible;
  opacity: 0.2;
  transition: all 0.5s linear;
}

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