javascript - CSS 过渡不适用于 classList.add

Question

很好，我已经一个小时了，我要疯了(我是新人)我有一个按钮，按下时会显示一个 div 。固定的侧边菜单，它占据 100% 的高度和宽度，包含两个 div，一个是黑色背景，具有一定的透明度，占据所有内容，还有一个白色的侧边菜单。我希望当您激活打开按钮或关闭按钮或透明地触摸黑色背景时，背景和菜单出现或消失但有一个过渡，我不知道为什么它不起作用，带有侧面过渡的菜单和菜单从 0 到 .关闭时不透明度为 2，反之亦然

看看是否有人可以解释为什么它不起作用，在此先感谢您:)

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>

Answer 1

主要问题是您正在尝试转换无法转换的 display 属性:https://www.w3schools.com/cssref/pr_class_display.asp因此，我们将根据您的喜好定义您的显示属性，但我们将添加不透明度和可见性属性，并将它们作为我们的过渡目标。我们还将指定一个带有线性的计时操作，您可以自行决定更改它(请参阅:https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function)，并且为了保持简单我们将转换所有内容，因为您在这里没有任何真正需要的特殊性。希望对您有所帮助，如果您有任何问题，请告诉我:)

编辑:在 body 上添加了浅蓝色，这样您就可以看到发生的一切，但您可以明显地把它去掉。

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