1

我有一个在悬停时运行的动画，但由于移动设备不能真正悬停在按钮上，我正在尝试添加一个点击功能。我在尝试将点击事件添加到我已经存在的代码时遇到了困难。

因此，目前，动画通过将鼠标悬停在菜单上并从其后面转换按钮来工作。单击菜单时，我试图使相同的过渡动画。我试过 .getElementByID() 但不知道将哪个 id 放在哪里让它工作，或者我是否需要在 HTML 中添加一个类。

<div class="btn">
      <button id="menu" type="button"><h5>Menu</h5></button>
      <div id="box"><a href="info.html"><button id="button-1" type="button"><h4>Info</h4></button></a></div>
      <div id="box-2"><a href="about.html"><button id="button-2" type="button"><h4>About Us</h4></button></a></div>
      <div id="box-3"><a href="contact.html"><button id="button-3" type="button"><h4>Contact</h4></button></a></div>
    </div>

#menu:hover ~ #box{
  animation-name: myanimation;
  animation-duration: 1s;
  animation-timing-function: ease-out;
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-direction: forwards;
  animation-fill-mode: forwards;
  animation-play-state: running;
}

任何可以提高我对 Javascript 理解的帮助将不胜感激，谢谢。

4

1 回答 1

0

您需要在单击事件上向按钮添加一个类。此类将包含 CSS 动画，当您单击按钮时将调用该动画。但是因为你有多个按钮，你需要传递事件来获取你想要添加类的元素。请查看下面的示例以供参考。

function animateBtn(e) {
    e = e || window.event;
    var element = e.target || element.srcElement; 
  element.classList.add("active");
}
#menu.active ~ #box{
  animation-name: myanimation;
  animation-duration: 1s;
  animation-timing-function: ease-out;
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-direction: forwards;
  animation-fill-mode: forwards;
  animation-play-state: running;
}
<div class="btn">
      <button onclick="animateBtn(event);"" id="menu" type="button">Menu</button>
</div>

于 2019-07-11T19:16:18.000 回答