我的转换不会在输入检查时触发，但我的事件会触发

Question

我试图制作一个模式菜单，在单击burguer菜单时从侧面平滑过渡，它可以工作，但过渡不会启动，但如果我运行实时服务器并实时进行更改，则应用转换，有人能帮我吗？

这是直播网站，所以你可以查看https://silkiercomet.github.io/audiphile-starter/

这是css

.modal {
visibility: hidden;
pointer-events: none;
position: fixed; 
z-index: 1; 
left: 0;
top: 0;
width: 100%; 
height: 100%; 
overflow: auto; 
background-color: rgb(0,0,0); 
background-color: rgba(0,0,0,0); 

}

#mobile-menu:checked ~ .modal{
visibility: visible;
pointer-events: all;
background-color: rgba(0,0,0,0.6); /* Black w/ opacity */
}
/* Modal Content/Box */
.modal-content {
position: relative;
background-color: #fefefe;
margin-left: auto; 
padding: 20px;
border: 1px solid #888;
width: 60%; 
height: 100%;
transition-property: transform, opacity;
transition-duration: 1s;
transition-timing-function: ease-in-out;
transform: translateX(200px);
opacity: 0;
}
#mobile-menu:checked ~ .modal .modal-content{
transform: translateX(0px);
opacity: 1;
}

Answer 1

因此，这里有一个适用于您的基本示例。我认为问题的一部分是你隐藏了模态div，我知道它会干扰的动画

var toggle = document.getElementById('toggle');
var menu = document.getElementById('menu');
toggle.addEventListener('click', function() {
menu.classList.toggle('active');
});

#toggle {
position: fixed;
z-index: 999;
right: 10px;
top: 10px;
}
.content { 
width: 100%;
height: 600px;
background-color: #ddd;
}
#menu { 
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 99;
display: flex;
pointer-events: none;
background-color: rgba(0,0,0,0.6);
opacity: 0;
}
#menu .navigation {
width: 600px;
height: 100%;
background-color: #aaa;
margin-left: -600px;
transition: all 0.5s;
}
#menu.active {
opacity: 1;
}
#menu.active .navigation { 
margin-left: 0px;
}

<div class="content">
<button id="toggle">Toggle Menu</button>
</div>
<div id="menu">
<div class="navigation">
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
<li>Menu 5</li>
</ul>
</div>
<div class="overlay"></div>
</div>

Answer 2

基本上，如果不通过JS更改类，就不可能触发转换，我试图只使用CSS，但由于文档工作流，这是不可能的