JavaScriptでアニメーションのイージー機能を作成するにはどうすればよいですか？

Question

jqueryには、既にアニメーション化できる関数があります。しかし、私はどのように私はそれがjavascriptと一緒に行きたい位置に要素を容易にするかを知りたい。私はボタンをクリックするとdivが表示され、少し下にスライドする単純な関数があります。問題は、スライディングダウンのアニメーションが時には少しばれていることですが、他の時はその罰金です。ボタンをクリックするたびにアニメーションをスムーズにする方法はありますか？私はあなただけ正直にCSSアニメーションを使用して、あなたの問題を解決することができると思い

スニペット

document.querySelector('div#ex2 button').onclick = function() { 
 
    var counter; 
 

 
    // shows the div 
 
    document.querySelector('div#reveal').style.display = "block"; 
 

 
    // used to decrease bottom position 
 
    var dec = 20; 
 
    counter = setInterval(moveD, 10); 
 

 
    // moves the div down 
 
    function moveD() { 
 
     dec -= 2; 
 
     document.getElementById('reveal').style.bottom = dec + "px"; 
 
     if (dec < 1) { 
 
     clearInterval(counter); 
 
     log('function is done'); 
 
     document.getElementById('reveal').style.bottom = 0; 
 
     } // moveD if 
 
    } // function moveD 
 

 

 
}; // onclick function

div#reveal { 
 
    height: 100px; 
 
    width: 300px; 
 
    background: purple; 
 
    padding: 5px; 
 
    position: relative; 
 
    bottom: 20px; 
 
    display: none; 
 
    color: white; 
 
    text-align: center; 
 
    vertical-align: center; 
 
    margin: 10px 0; 
 
}

<div id="ex2"> 
 
    <h2>Example 2</h2> 
 
    <p></p> 
 
    <h4>results:</h4> 
 
    <button>Click it</button> 
 
    <div id="reveal">This will be revealed</div> 
 
</div>

Answer 1

。 何か可能な場合は、常にJavaScriptを使用して何かを行うようにしてください。具体的に

w3schools link

（あなたが少しをscrolldownすることができます）あなたがに興味があるanimation-timing-functionはあり

Answer 2

これらすべてのイージング関数をチェックアウト：。https://github.com/danro/jquery-easing/blob/master/jquery.easing.js。

あなたがそれらを使用して見たい場合は、http://nanimation.js.org/で私のアニメーションライブラリをチェックしてください。

機能とそのパラメータの詳細については、jQuery easing function — variables' comprehensionを確認してください。