Question

我需要该按钮作为CSS动画的触发器。这只是基本的东西，但我搞砸了。我怎么了为什么当我按下按钮时什么也没发生？

function xyz() {
  document.getElementById('box').classList.toggle(active)
}

#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;
}

<div id="box">
  <a href="#" class="close-box" onclick="closeMenu()">&times;</a>
</div>
<button type="button" onclick="xyz()">Click Me!</button>

Answer 1

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

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

单引号或双引号之间的“活动”状态。

如何通过按钮触发CSS

1 个答案: