私はJSとCSSのHTMLでやりたいアニメーションに問題があります

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クラスを切り替える必要があります。ここで

例である：それは `のgetElementsByClassName（）`ではなく `getElementByClass（）`であるべきであり、あなたがする必要があるので、それはまた、要素の配列を返します

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>