javascriptアニメーションの最後に要素を隠す方法

Question

私は前に尋ねられた同様の質問を知っていますが、答えは私と私の単純なアニメーションのために進んでいるので私を助けませんでした。私はJavaScriptの冒頭にいます。私のウェブサイトでは、あるポジションから別のポジションに要素を移動するための簡単なコードがあります。私はそれが最終的な位置に到達したとき消えてしまい、消えずに突然消えてしまいたいです。不透明度の変更でそれを行う必要がありますか？どのように書きますか？私のコードは以下の通りです。

function myMove() { 
    var elem = document.getElementById("animation"); 
    var pos = 100 ; 
    var id = setInterval(frame, 5); 

    function frame() { 
     if (pos == 380) { 
      clearInterval(id); 


     } else { 
      pos++; 
      elem.style.top = pos + 'px'; 
      elem.style.left = pos + 'px'; 

     } 
    } 

} 

Answer 1

要素を非表示にするには、単純にstyle.displayを 'none'に設定します。例えば

：ちょうどヘッドアップとして

function myMove() { 
    var elem = document.getElementById("animation"); 
    var pos = 100 ; 
    var id = setInterval(frame, 5); 

    function frame() { 
     if (pos == 380) { 
      clearInterval(id); 
      // this is the key line 
      elem.style.display = 'none'; 

     } else { 
      pos++; 
      elem.style.top = pos + 'px'; 
      elem.style.left = pos + 'px'; 

     } 
    } 

、連鎖setTimeoutsを使用すると、HTMLアニメーションでのsetIntervalを使用するよりも改善することができます。その理由は、アニメーション（および/またはページ上の他のスクリプト）が間隔よりも長くかかる場合、ブラウザは応答しなくなるからである。 setTimeoutsのチェーンでは、時計は現在のフレームの終わりまでティッキングを開始しません。

例えば

、あなたができる：

function myMove() { 
    var elem = document.getElementById("animation"); 
    var pos = 100 ; 

    function frame() { 
     if (pos == 380) { 
      // this is the key line 
      elem.style.display = 'none'; 

     } else { 
      pos++; 
      elem.style.top = pos + 'px'; 
      elem.style.left = pos + 'px'; 
      // set a timeout for 5 ms 
      setTimeout(myMove, 5); 
     } 
    }