如何通过按钮触发CCS

Posted 2021-04-27

我需要这个按钮作为一个css动画的触发器，这只是一些基本的东西，但我把它弄乱了，我的错误是什么，为什么当我按下按钮时什么都没有发生？

<div id="box">
  <a href="#" class="close-box" onclick="closeMenu()">&times;</a>
</div>
<button type="button" onclick="xyz()">Click Me!</button>
<script>
  function xyz(){
  document.getElementById('box').classList.toggle(active)
}
</script>

#box{
  position: absolute;
  top: -120%;
  left: 20%;
  width: 60%;
  height: 60%;
  background: #000;
  transition: .5s;
  opacity: 0.7;

}
#box.active{
  top: 20%;
}
#box a{
  font-size: 3em;
  margin:0;
  padding: 0;
  color: #fff;
}

答案

问题似乎是你应该将类名指定为一个字符串。

document.getElementById('box').classList.toggle('active')

所以'active'，用单引号或双引号。