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 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)，为了简单起见，我们将转换所有内容，因为您在这里不需要任何特殊性。希望对您有所帮助，如果您有任何问题，请告诉我:)

编辑：在正文中添加了一个 light-blue，这样您就可以看到发生的一切，但您可以明显地将其删除。

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>

CSS 转换不适用于 classList.add

CSS transition not working with classList.add

javascript

html

css

css-animations

css-transitions