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 ），我們將為了保持簡單而轉換所有內容，因為您在這里不需要任何特殊性。 希望對您有所幫助，如果您有任何問題，請告訴我:)

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

 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>