Javascript：爲什麼我的javascript不能同時運行這兩個動畫？

Question

我正在爲我的項目製作視頻遊戲，並遇到動畫問題。基本上，我正在做一個最終幻想風格的遊戲，你的ATB酒吧充電一旦完成，你可以做一個技巧。所以我在這裏有3個功能。第一個是清除我的ATB欄，以便重置。此代碼有效。第二個是通過移動一個DIV塊來補充時間條。這也適用。第三個功能是我的攻擊技能函數，除了它沒有按照我放置它們的順序執行這兩個動畫函數外，它也可以工作。

如果你看下面，你會注意到我有代碼先運行清晰的ATB函數，然後運行時間條函數，希望每次點擊按鈕它都會重置我的ATB。問題是，它完全忽略了FIRST函數並運行第二個函數。我試着切換它們，發生同樣的事情。所以基本上我堅持我的代碼總是會忽略第一個，如果我的兩個動畫函數都在代碼中，則操作第二個。所以現在我對如何解決這個問題感到困惑，因爲我希望這兩個代碼能夠工作。他們現在單獨和獨立地工作，但是當我結合他們時，只有第二個人登記。

// 5. ATB TIMEBAR FUNCTION 

function clearTimeBar (el, color) { //Clears the bar 
    var elem = document.getElementById(el); 
    elem.style.transition = "width 0.0s, ease-in 0s"; 
    elem.style.background = color; 
    elem.style.width = "0px" 
} 
function timeBar (el, color) { // Runs the animation 
    var elem = document.getElementById(el); 
    elem.style.transition = "width 6.0s, ease-in 0s"; 
    elem.style.background = color; 
    elem.style.width = "289px"; 
    } 

// ATTACK SKILL 
document.getElementById("attack").addEventListener('click', function(){ 
    clearTimeBar('overlay','white'); // Clear the ATB bar 
    timeBar('overlay', 'blue'); // Run the ATB bar 
    var criticalRoll = Math.floor(Math.random() * 100 + 1); 
    var precisionRoll = Math.floor(Math.random() * cs.precision + 1); 
    var npcParryRoll = Math.floor(Math.random() * dragonstats.parry + 1); 
    var damage = Math.floor(Math.random() * cs.strength + 1); 
     if (precisionRoll < npcParryRoll) { 
      addMessage("The Dragon evaded your attack!"); 
      return; 
     } 
     if (cs.critical >= criticalRoll) { 
      damage *= 2; 
      damage -= dragonstats.armor; 
      dragon.hp -= damage; 
      document.getElementById("npchp").innerHTML = dragon.hp; 
      addMessage("Critical Strike! Dragon suffers " + damage + " hp!") 
      } 
     else if (damage - dragonstats.armor <= 0) { 
      addMessage("Your opponents armor withstood your attack!"); 
      } 
    else { 
    damage -= dragonstats.armor; 
    dragon.hp -= damage; 
    document.getElementById("npchp").innerHTML = dragon.hp; 
    addMessage("You hit the dragon for " + damage + " hp!"); 
    } 
}); 

Answer 1

在clearTimeBar完成後運行您的timeBar函數。

window.setTimeout(function() { timeBar('overlay', 'blue') }, 1000/60); 

或

window.requestAnimationFrame(function() { timeBar('overlay', 'blue') });