CSS過渡不適用于classList.add

好，我已經一個小時了，我快瘋了（我是新手）我有一個按鈕，按下時會顯示一個 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>

uj5u.com熱心網友回復：

主要問題是您正在嘗試轉換無法轉換的display屬性：https ://www.w3schools.com/cssref/pr_class_display.asp因此，我們將根據您的喜好定義您的顯示屬性，但我們'將添加不透明度和可見性屬性，并使它們成為我們的過渡目標。我們還將指定一個線性計時操作，您可以自行更改（請參閱：https ://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function ），我們將為了保持簡單而轉換所有內容，因為您在這里沒有任何真正需要特異性。希望對您有所幫助，如果您有任何問題，請告訴我:)

編輯：在身體上添加了一個淺藍色，這樣你就可以看到發生的一切，但你可以很明顯地把它拿出來。

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>

標籤：javascript html css CSS动画 CSS 过渡

上一篇：如果我正在使用vanillaJS操作DOM……我可以將其中一項設為React組件嗎？

下一篇：使用Date-FNS決議日期和時間的問題