Question

我是网站建设的初学者，我想在每次按下按钮时创建一个动画。所以我首先尝试在CSS上做，但是意识到单独使用它无法完成，所以我将JS合并到我的代码中仍然无法正常工作。我的想法是，当我按下按钮“过滤器”时，元素中的菜单“.filter”降下来，所以我尝试添加动画来向下移动边距，这不起作用。我怎样才能做到这一点？

function btnFilter() {
  document.getElementByClass(".filter").style.WebkitAnimation = "filter-animation";
  document.getElementByClass(".filter").style.animation = "filter-animation";
}

.filter {
  display: none;
  position: relative;
  border-radius: 8px;
  border-bottom: 1px solid #ffffff;
  border-left: 1px solid #ffffff;
  border-right: 1px solid #ffffff;
  margin-top: -57px;
}
@-webkit-keyframes filter-animation {
  from {
    margin-top: -57px;
    display: none;
  }
  to {
    margin-top: 30px;
    display: flex;
  }
}
@keyframes filter-animation {
  from {
    margin-top: -57px;
    display: none;
  }
  to {
    margin-top: 30px;
    display: flex;
  }
}

<button onclick="btnFilter()">Filter</button>
<div class="filter">
  <p>filter</p>
  <form class="drpdwn-1">
    <p>Price range:</p>
    <select value="Price Range">
      <option>$0 - $50</option>
      <option>$50 - $100</option>
      <option>> $100</option>
    </select>
  </form>
</div>

Answer 1

function btnFilter() {
  document.getElementsByClassName(".filter").style.WebkitAnimation = "filter-animation";
  document.getElementsByClassName(".filter").style.animation = "filter-animation";
}

使用getElementsByClassName('.className')...

Answer 2

jQuery（JS）可能对您有所帮助 https://jsfiddle.net/moongod101/h8t6347b/
我的方法是使用jQuery函数addClass，简单易用

Answer 3

您可以只使用CSS，但每次都需要切换css类以设置按钮的动画。

以下是一个例子：

var el = document.querySelector(".button");

el.addEventListener('click', function() {
  if(!el.classList.contains("animate")) {
    el.classList.add("animate"); 
  } else {
    el.classList.remove("animate"); 
  }
});

.button {
  font-weight: bold;
  font-size: 1.2em;
  color: white;
  background-color: #777;
  padding: 0.7em 2em;
  border: 0;
  margin: 1em auto 0;
  border-radius: 3px;
  box-shadow: 0 3px 0 #444;
  display: block;
  cursor: pointer;
  appearance: none;
  
  transition: transform 1.5s ease;
}

.animate {
  transform: translateY(50px);
}

<button class="button">Click me</button>

我想用HTML中的JS和CSS做动画我遇到了麻烦

3 个答案: