mit Javascript zu steuern CSS3 Animation Pause und

Ich versuche mit reinem Javascript, um eine CSS3-Animation zu erstellen, funktioniert es. Und dann möchte ich, dass diese Animation anhalten kann, wenn die Maus in den Container eindringt und läuft, wenn die Maus den Container verlässt. Ich benutze animate.pause, animate.play & animationPlayState, aber es funktioniert immer noch nicht. Also, wie funktioniert es? Entschuldige mein Englisch, vielen Dank!mit Javascript zu steuern CSS3 Animation Pause und

Hier ist mein Code:

window.onload = function() { 
 
\t var ulNode = document.querySelector(".container>ul"), 
 
\t \t frames = [ 
 
\t \t \t {left: 0}, 
 
\t \t \t {left: '-700px'}, 
 
\t \t \t {left: 0} 
 
\t \t ], 
 
\t \t timing = { 
 
\t \t \t duration: 10000, 
 
\t \t \t iterations: Infinity, 
 
\t \t }; 
 
\t ulNode.animate(frames, timing); 
 
\t var player = ulNode.animate(frames); 
 

 
\t ulNode.onmouseover = function(){ 
 
\t \t // player.pause(); 
 
\t \t this.style.animationPlayState = "paused"; 
 
\t } 
 
\t ulNode.onmouseout = function(){ 
 
\t \t // player.play(); 
 
\t \t this.style.animationPlayState = "running"; 
 
\t } 
 
}

body,ul{margin: 0; padding: 0;} 
 
.container{ 
 
    width: 500px; 
 
    height: 100px; 
 
    position: relative; 
 
    margin: 0 auto; 
 
    overflow: hidden; 
 
} 
 
ul{list-style-type: none; position: absolute; left: 0; top: 0; width: 1200px;} 
 
ul>li{width: 100px; height: 100px; float: left;} 
 
ul>li:nth-child(odd){background-color: red;} 
 
ul>li:nth-child(even){background-color: green;} 
 
/*@keyframes doMove{ 
 
\t form{left: 0;} 
 
\t 50%{left: -700px;} 
 
\t to{left: 0px;} 
 
} 
 
ul{animation: doMove 20s linear infinite;} 
 
.container:hover ul{animation-play-state:paused;}*/

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
<meta charset="utf-8"> 
 
<title>CSS3 Animation</title> 
 
</head> 
 
<body> 
 
<div class="container"> 
 
\t <ul> 
 
     <li></li> 
 
     <li></li> 
 
     <li></li> 
 
     <li></li> 
 
     <li></li> 
 
     <li></li> 
 
     <li></li> 
 
     <li></li> 
 
     <li></li> 
 
     <li></li> 
 
     <li></li> 
 
     <li></li> 
 
    </ul> 
 
</div> 
 
</body> 
 
</html>

Quelle

2016-06-22 Coco Tsau

offenbar für Chrome, Safari und Opera die richtige js Syntax eine Animation ist

document.getElementById("myDIV").style.WebkitAnimationPlayState = "paused";

zu pausieren (nicht e das Webkit am Anfang). Dies ist nach w3schools, aber trotz ein paar Versuche konnte ich es nicht funktionieren. (Siehe unten)

window.onload = function() { 
 
    var ulNode = document.querySelector("#container"), 
 
\t frames = [ 
 
\t \t {left: '0px'}, 
 
\t \t {left: '-700px'}, 
 
\t \t {left: '-100%'} 
 
\t ], 
 
\t timing = { 
 
\t \t duration: 10000, 
 
\t \t iterations: Infinity, 
 
\t }; 
 
    ulNode.animate(frames, timing); 
 
    
 
    ulNode.onmouseover = function() { 
 
    document.getElementById("container").style.WebkitAnimationPlayState = "paused"; 
 
    } 
 
    ulNode.onmouseout = function() { 
 
    document.getElementById("container").style.WebkitAnimationPlayState = "running"; 
 
    } 
 
};

body, 
 
ul { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
#container { 
 
    width: 500px; 
 
    height: 100px; 
 
    position: relative; 
 
    margin: 0 auto; 
 
    overflow: hidden; 
 
} 
 
ul { 
 
    list-style-type: none; 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    width: 1200px; 
 
} 
 
ul>li { 
 
    width: 100px; 
 
    height: 100px; 
 
    float: left; 
 
} 
 
ul>li:nth-child(odd) { 
 
    background-color: red; 
 
} 
 
ul>li:nth-child(even) { 
 
    background-color: green; 
 
}

<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>CSS3 Animation</title> 
 
</head> 
 

 
<body> 
 
    <div id="container"> 
 
    <ul> 
 
     <li></li> 
 
     <li></li> 
 
     <li></li> 
 
     <li></li> 
 
     <li></li> 
 
     <li></li> 
 
     <li></li> 
 
     <li></li> 
 
     <li></li> 
 
     <li></li> 
 
     <li></li> 
 
     <li></li> 
 
    </ul> 
 
    </div> 
 
</body> 
 

 
</html>

Quelle

2016-06-23 08:03:10

so nett von Ihnen. Ja, ich denke auch, dass 'WebkitAnimationPlayState' die richtige Syntax ist, aber es funktioniert nicht. Hat vielleicht einen anderen Grund oder wird nicht unterstützt. –

Ja, es ist bedauerlich, ich habe es mit und ohne Initialisierung in CSS versucht, aber ohne Erfolg :( –

'Webkit' oder' webkit' mit Kleinbuchstaben ersten Buchstaben? – Qwertiy

mit Javascript zu steuern CSS3 Animation Pause und

Antwort

Verwandte Themen