如果CSS動畫已結束，則爲JavaScript

我正在HTML/JavaScript中製作遊戲，並且作爲其中的一部分，有一項「特殊功能」只能每隔x秒觸發一次。我創建了一個GUI元素，顯示該能力是否已準備好使用。因爲我正在使用CSS動畫，所以我想檢查一下按鍵上的元素是否已完成動畫（表明它已準備就緒）。如果CSS動畫已結束，則爲JavaScript

我想在一個簡單的if語句中執行此操作，而不是使用addEventListener，但我不確定這是否可行。

到目前爲止我的代碼是：

var keystate = {}; 
 

 
    window.addEventListener("keydown", function(e) { 
 
     keystate[e.keycode || e.which] = true; 
 
    }, true); 
 
    window.addEventListener("keyup", function(e) { 
 
     keystate[e.keycode || e.which] = false; 
 
    }, true); 
 

 
    window.setInterval(function() { 
 
     if (keystate[87]) { //w key, THIS is where I want to check if the animation has completed as well 
 
     //do stuff 
 
     document.getElementById("circle_flash_glow").classList.add("circle_flash_use"); 
 
     } 
 
    }, 16.666666666666667);

#svg_circle_loader { 
 
    position: absolute; 
 
    right: 0; 
 
    bottom: 0; 
 
    background: none; 
 
    border: none; 
 
    margin: none; 
 
    padding: none; 
 
} 
 
#circle_flash_loader { 
 
    fill: none; 
 
    stroke: #F00; 
 
    stroke-width: 10px; 
 
    stroke-dashoffset: 80; 
 
    animation-fill-mode: forwards; 
 
} 
 
.circle_loader_load { 
 
    animation: circle_flash_loading linear; 
 
    animation-duration: 2.5s; 
 
} 
 
@keyframes circle_flash_loading { 
 
    0% { 
 
    stroke-dasharray: 0, 314; 
 
    } 
 
    100% { 
 
    stroke-dasharray: 314, 0; 
 
    } 
 
} 
 
#circle_flash_glow { 
 
    fill: none; 
 
    stroke: #F00; 
 
    stroke-width: 0px; 
 
    animation-fill-mode: forwards; 
 
    opacity: 1; 
 
} 
 
.circle_flash_use { 
 
    animation: circle_flash_pulse 0.6s ease-out; 
 
} 
 
@keyframes circle_flash_pulse { 
 
    0% { 
 
    opacity: 1; 
 
    stroke-width: 0px; 
 
    } 
 
    100% { 
 
    opacity: 0; 
 
    stroke-width: 70px; 
 
    } 
 
}

<svg id="svg_circle_loader" width="200" height="200"> 
 
    <defs> 
 
    <filter id="f1" x="-50" y="-50" width="200" height="200"> 
 
     <feGaussianBlur stdDeviation="5"></feGaussianBlur> 
 
    </filter> 
 
    </defs> 
 
    <circle cx="100" cy="100" r="50" id="circle_flash_glow" class="" filter="url(#f1)"></circle> 
 
    <circle cx="100" cy="100" r="50" id="circle_flash_loader" class="circle_loader_load"></circle> 
 
</svg>

來源

2016-11-28 Philip Eagles

設置一個全局變量設置爲true時，動畫啓動和關閉它在動畫完成。只有在動畫錯誤時才播放動畫。 –

添加一個變量來設置當前狀態，並設置與setTimeout()檢查它是否動畫與否。還可以添加window.onload加入

window.onload=function(){ 
    animating=true; 
    sts.value=animating; 
    window.setTimeout(function() { 
    animating=false; 
    sts.value=animating; 
    }, 2500); 
};

在那裏我使用2500以獲取其狀態。因爲你的CSS動畫屬性有 = 2.5s的在2500ms

var animating = false; 
 
var keystate = {}; 
 

 
window.addEventListener("keydown", function(e) { 
 
    keystate[e.keycode || e.which] = true; 
 
}, true); 
 
window.addEventListener("keyup", function(e) { 
 
    keystate[e.keycode || e.which] = false; 
 
}, true); 
 

 
window.setInterval(function() { 
 
    if (keystate[87]) { //w key, THIS is where I want to check if the animation has completed as well 
 
    //do stuff 
 
    if (!animating) { 
 
     alert("animation finished"); 
 
     document.getElementById("circle_flash_glow").classList.add("circle_flash_use"); 
 
    } 
 
    } 
 
}, 16.666666666666667); 
 

 
window.onload = function() { 
 
    animating = true; 
 
    sts.value = animating; 
 
    window.setTimeout(function() { 
 
    animating = false; 
 
    sts.value = animating; 
 
    }, 2500); 
 
};

#svg_circle_loader { 
 
    position: absolute; 
 
    right: 0; 
 
    bottom: 0; 
 
    background: none; 
 
    border: none; 
 
    margin: none; 
 
    padding: none; 
 
} 
 
#circle_flash_loader { 
 
    fill: none; 
 
    stroke: #F00; 
 
    stroke-width: 10px; 
 
    stroke-dashoffset: 80; 
 
    animation-fill-mode: forwards; 
 
} 
 
.circle_loader_load { 
 
    animation: circle_flash_loading linear; 
 
    animation-duration: 2.5s; 
 
} 
 
@keyframes circle_flash_loading { 
 
    0% { 
 
    stroke-dasharray: 0, 314; 
 
    } 
 
    100% { 
 
    stroke-dasharray: 314, 0; 
 
    } 
 
} 
 
#circle_flash_glow { 
 
    fill: none; 
 
    stroke: #F00; 
 
    stroke-width: 0px; 
 
    animation-fill-mode: forwards; 
 
    opacity: 1; 
 
} 
 
.circle_flash_use { 
 
    animation: circle_flash_pulse 0.6s ease-out; 
 
} 
 
@keyframes circle_flash_pulse { 
 
    0% { 
 
    opacity: 1; 
 
    stroke-width: 0px; 
 
    } 
 
    100% { 
 
    opacity: 0; 
 
    stroke-width: 70px; 
 
    } 
 
}

<svg id="svg_circle_loader" width="200" height="200"> 
 
    <defs> 
 
    <filter id="f1" x="-50" y="-50" width="200" height="200"> 
 
     <feGaussianBlur stdDeviation="5"></feGaussianBlur> 
 
    </filter> 
 
    </defs> 
 
    <circle cx="100" cy="100" r="50" id="circle_flash_glow" class="" filter="url(#f1)"></circle> 
 
    <circle cx="100" cy="100" r="50" id="circle_flash_loader" class="circle_loader_load"></circle> 
 
</svg> 
 
<input id="sts" value="" />

來源

2016-11-28 18:57:52 jafarbtech

如果CSS動畫已結束，則爲JavaScript

回答

相關問題