Wie erkennt man, dass die Animation einen bestimmten Keyframe erreicht? (Zum Beispiel 50% oder 75%). DieseErkennen von spezifischen CSS3-Keyframes mit JavaScript
ist, was ich versucht:
element.addEventListener("animationend", AnimationListener, false);
aber es unterstützt animationstart, animationiteration und animationend nur.
http://jsfiddle.net/W3y7h/294/
das Beispiel Mit Fiddle vorgesehen, sind, was Sie im Wesentlichen zu wissen, suchen ist, wenn der Wert von #sunbottom Eigenschaft des Elements zu 100px gleich ist. Sie können dies tun, indem getComputedStyle() mit diesem Wert zu überprüfen, das Intervall Löschen, wenn es um 100px gleich ist und dann, was die Ausführung von Code Sie mögen, etwa so:
var style=window.getComputedStyle(document.getElementById("sun")),
\t interval=setInterval(function(){
if(parseInt(style.getPropertyValue("bottom"))===100){
clearInterval(interval);
console.log("50% reached");
}
},1);#sun{
animation:sunrise 1s ease;
bottom:0;
background:#ff0;
border-radius:50%;
height:50px;
position:absolute;
width:50px;
}
@keyframes sunrise{
0%{
bottom:0;
left:0;
}
50%{
bottom:100px;
}
100%{
bottom:0;
left:400px;
}
}<div id="sun"></div>Um zu überprüfen, für mehrere Werte , setze einfach ein neues Intervall. Im Fall Ihres Beispiels sollte der Wert der bottom-Eigenschaft 50px sein, wenn die Animation zu 75% abgeschlossen ist. Das heißt, es ist nicht immer genau 50px in jedem Browser, stattdessen, da wir wissen, der Wert der bottom Eigenschaft wird an dieser Stelle abnehmen, überprüfen Sie stattdessen, ob es kleiner als oder gleich 50:
var style=window.getComputedStyle(document.getElementById("sun")),
\t interval=setInterval(function(){
if(parseInt(style.getPropertyValue("bottom"))===100){
clearInterval(interval);
console.log("50% reached");
interval=setInterval(function(){
if(parseInt(style.getPropertyValue("bottom"))<=50){
clearInterval(interval);
console.log("75% reached");
}
},1);
}
},1);#sun{
animation:sunrise 1s ease;
bottom:0;
background:#ff0;
border-radius:50%;
height:50px;
position:absolute;
width:50px;
}
@keyframes sunrise{
0%{
bottom:0;
left:0;
}
50%{
bottom:100px;
}
100%{
bottom:0;
left:400px;
}
}<div id="sun"></div>
Soweit ich die einzige Option wissen, ist, einen Timer zu verwenden und eigene Berechnungen. Habe gerade die Spezifikationen überprüft, es scheint ein "elapsedTime" -Attribut zu geben, aber es würde dir nur die Zeit sagen, welcher Prozentsatz es darstellt, würde immer noch Berechnungen benötigen. – Harry
Bitte geben Sie ein Beispiel für Ihre Animation an. – Shaggy
@Shaggy hast du die Geige überprüft? – Beckham