Meine automatisch generierten "Punkte" bleiben nach ein paar Sekunden unten auf dem Bildschirm

Also habe ich diese Seite (http://mc.wordquest.nl/green/dots.html) und ich möchte Punkte vom unteren Rand der Seite in die Luft schweben lassen. In den ersten Sekunden funktioniert es gut. Aber nach einer Sekunde oder 5 bleiben die Punkte an ihrem Platz. Meine automatisch generierten "Punkte" bleiben nach ein paar Sekunden unten auf dem Bildschirm

Die Punkte sollen bis 100px über dem unteren Rand der Seite schweben. Ich mache das mit einer CSS-Animation (vielleicht nicht die beste Art, Dinge zu tun, aber ich kann damit arbeiten ...).

Der Code, den ich für die Seite verwenden:

<!DOCTYPE html> 
<html> 

<head> 
<title>Test</title> 
<style> 
    body { 
     height: 80%; 
     width: 90%; 
     font-family: Arial; 
     font-weight: Bold; 
    } 

    .dot { 
     width: 20px; 
     height: 20px; 
     background-color: green; 
     position: absolute; 
     color: white; 
     z-index: 1px; 
     border-radius: 50%; 
     animation: dots 2s linear; 
    } 

    @keyframes dots { 
     0% { 
      width: 20px; 
      height: 20px; 
      opacity: 1; 
      bottom: 0px; 
     } 
     100% { 
/*    opacity: 0; */ 
      width: 0px; 
      height: 0px; 
      bottom: 100px; 
     } 
    } 
</style> 
</head> 

<body> 

<script> 
    window.setInterval(function() { 
     randomSquare(); 
    }, 100); 

    var i = 0; 

    function randomSquare() { 

     //Set window height 
     var w = window.innerWidth; 
     var h = window.innerHeight; 


     //Set dot x-position 
     var x = Math.floor((Math.random() * w) + 1); 
     var y = Math.floor((Math.random() * h) + 1); 

     // Add a dot to follow the cursor 
     dot = document.createElement('div'); 
     dot.className = "dot"; 
     dot.style.left = x + "px"; 
     dot.style.bottom = 10 + "px"; 

     i++; 

     //Random color 
     var COLOURS = ['#69D2E7', '#A7DBD8', '#E0E4CC', '#F38630',  '#FA6900', '#FF4E50', '#F9D423']; 
//   var color = "blue"; 
     var color = COLOURS[Math.floor(Math.random() * COLOURS.length)]; 

     dot.style.backgroundColor = color; 

     if (y < h * 0.97 && x < w * 0.97) { 
      document.body.appendChild(dot); 
     } 
    }; 
</script> 

</body> 

</html>

Quelle

2017-02-01 tim pim

Das Problem ist, dass 100% nach dem Erreichen Die Eigenschaften, die Sie in Ihren Keyframes definiert haben, bleiben nicht auf Ihre Animation angewendet. Um dies zu tun, müssen Sie animation-fill-mode: forwards; setzen. Außerdem ist es wichtig zu beachten, dass Sie Ihrem DOM unendlich viele Elemente hinzufügen. Das ist ein Speicherleck. Stattdessen sollten Sie nach einiger Zeit (Animation beendet) das Element entfernen. (Oder vielleicht Anzahl der Punkte festgelegt haben, und wieder verwenden sie) Betrachten Sie folgenden Code-Schnipsel, beachten Sie, dass es

setTimeout(function(){ 
      dot.remove(); 
     }, 2000)

Außerdem vergessen Sie var Schlüsselwort dot Variable hinzuzufügen, es global zu machen.

window.setInterval(function() { 
 
     randomSquare(); 
 
    }, 100); 
 

 
    var i = 0; 
 

 
    function randomSquare() { 
 

 
     //Set window height 
 
     var w = window.innerWidth; 
 
     var h = window.innerHeight; 
 

 

 
     //Set dot x-position 
 
     var x = Math.floor((Math.random() * w) + 1); 
 
     var y = Math.floor((Math.random() * h) + 1); 
 

 
     // Add a dot to follow the cursor 
 
     var dot = document.createElement('div'); 
 
     dot.className = "dot"; 
 
     dot.style.left = x + "px"; 
 
     dot.style.bottom = 10 + "px"; 
 
     
 
     i++; 
 

 
     //Random color 
 
     var COLOURS = ['#69D2E7', '#A7DBD8', '#E0E4CC', '#F38630',  '#FA6900', '#FF4E50', '#F9D423']; 
 
//   var color = "blue"; 
 
     var color = COLOURS[Math.floor(Math.random() * COLOURS.length)]; 
 

 
     dot.style.backgroundColor = color; 
 

 
     if (y < h * 0.97 && x < w * 0.97) { 
 
      document.body.appendChild(dot); 
 
     } 
 
     
 
     setTimeout(function(){ 
 
      dot.remove(); 
 
     }, 2000) 
 
    };

body { 
 
     height: 80%; 
 
     width: 90%; 
 
     font-family: Arial; 
 
     font-weight: Bold; 
 
    } 
 

 
    .dot { 
 
     width: 20px; 
 
     height: 20px; 
 
     background-color: green; 
 
     position: absolute; 
 
     color: white; 
 
     z-index: 1px; 
 
     border-radius: 50%; 
 
     animation: dots 2s linear; 
 
     -webkit-animation-iteration-count: 1; 
 
     animation-fill-mode: forwards; 
 
    } 
 

 
    @keyframes dots { 
 
     0% { 
 
      width: 20px; 
 
      height: 20px; 
 
      opacity: 1; 
 
      bottom: 0px; 
 
     } 
 
     100% { 
 
      width: 0px; 
 
      height: 0px; 
 
      bottom: 100px; 
 
     } 
 
    }

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
<title>Test</title> 
 

 

 
</body> 
 

 
</html>

Quelle

2017-02-01 22:28:38

die Elemente halten ihren Stil am Ende der Animation zu lassen, fügen:

.dot { 
    animation-fill-mode: forwards; 
}

Quelle

2017-02-01 22:23:18

Meine automatisch generierten "Punkte" bleiben nach ein paar Sekunden unten auf dem Bildschirm

Antwort

Verwandte Themen