애니메이션이 특정 키 프레임에 도달했음을 감지하는 방법은 무엇입니까? (예 : 50 % 또는 75 %).JavaScript로 특정 CSS3 키 프레임 감지
element.addEventListener("animationend", AnimationListener, false);
하지만 animationstart, animationiteration 및 animationend 만 지원합니다 :
이것은 내가 뭘하려합니다. #sun 요소의 bottom 속성 값이 100px 같을 때 바이올린이 제공하는 예제를 사용하여
http://jsfiddle.net/W3y7h/294/
, 당신이 기본적으로 알고 찾고 같습니다. 당신은 너무 좋아, 당신이 무엇을 원하는 코드를 실행 한 후이 100px 동일 할 때 간격을 삭제하고, 그 값을 확인 getComputedStyle()를 사용하여이 작업을 수행 할 수 있습니다
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>여러 값을 확인하려면 새 간격을 설정하기 만하면됩니다. 예제의 경우 애니메이션이 75 % 완료되면 bottom 속성의 값은 50px이어야합니다. 즉, 정확히 모든 브라우저에서 50px 일 필요는 없으므로 대신 bottom 속성 값이 줄어들 것이라는 가정하에 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>
는 지금까지 내가 알고있는 유일한 옵션은 타이머를 사용하여 자신의 계산을 사용하는 것입니다. 그냥 사양을 체크, 거기에 'elapsedTime' 속성이있을 것하지만 여전히 그것은 당신에게 시간을 알려주지 만, 그것이 나타내는 백분율은 여전히 계산이 필요합니다. – Harry
애니메이션의 워킹 예제를 제공하십시오. – Shaggy
@Shaggy 당신은 바이올린을 확인 했습니까? – Beckham