wie ein Element am Ende von Javascript-Animation ausblenden

Question

Ich weiß, ähnliche Fragen wurden zuvor gefragt, aber die Antworten haben mir nicht geholfen, weil sie für mich und meine einfache Animation zu weit fortgeschritten sind. Ich bin am Anfang von Javascript. Auf meiner Website habe ich den einfachen Code zum Verschieben eines Elements von einer Position in eine andere. Ich möchte es verschwinden lassen, wenn es die endgültige Position erreicht, nicht ausbleicht, einfach plötzlich verschwindet. Sollte ich es mit Opazitätsänderung tun? Wie schreibe ich es? Mein Code ist folgender.

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

Um ein Element auszublenden, setzen Sie einfach style.display auf 'none'.

Zum Beispiel:

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'; 

     } 
    } 

Genau wie ein Heads-up, können verkettet setTimeouts mit besser als setInterval in HTML-Animation mit. Der Grund dafür ist, dass der Browser nicht mehr reagiert, wenn die Animation (und/oder andere Skripts auf der Seite) länger dauert als das Intervall. Bei einer Kette von setTimeouts beginnt die Uhr erst am Ende des aktuellen Frames zu ticken.

Zum Beispiel könnten Sie tun:

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); 
     } 
    }