gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-05 04:29:31 26 4
gpt4 key购买 nike

很好,我已经一个小时了,我要疯了(我是新人)我有一个按钮,按下时会显示一个 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>

最佳答案

主要问题是您正在尝试转换无法转换的 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>

关于javascript - CSS 过渡不适用于 classList.add,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/72312424/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com