javascript - 我在使用 HTML 中的 JS 和 CSS 制作动画时遇到问题

Question

我是网站 build 的初学者，我想在每次按下按钮时创建一个动画。所以我首先尝试在 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

jQuery(JS) 可以帮到你 https://jsfiddle.net/moongod101/h8t6347b/
我的方法是使用 jQuery 函数 addClass，简单易行