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

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

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

Answer 2

下面是一个基本的例子，应该适用于你。我认为问题的一部分是你隐藏了模态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>

​