Witam, chciałem użyć setInterval do kreacji czegoś takiego na wzór health bara, wszystko fajnie działa, ale problem zaczyna się gdy chce dodać animacje wewnątrz funkcji. Korzystam ze sposobu usuwania i dodawania klas css.
Na zewnątrz funkcji i na konsoli animacja normalnie działa i mogę ją resetować:
document.getElementById("weapon").classList.add('animation1');
[....]
document.getElementById('weapon').classList.remove('animation1');
a to funkcja, hp bar działa i jest dynamiczny, tzn w takim sensie jak chciałem tak działa, ale brakuje mi animacji, które w setInerval mi nia działają, o to funkcja:
function fightBeta(){
var elem = document.getElementById("myHPbar");
var elem2 = document.getElementById("enemyHPbar");
var width = 100;
var width2 = 100;
var maxHp = char.hp;
var currentHp = char.hp;
var enemyHp = 200;
var id = setInterval(frame, 200);
elem.style.transition = 'width 2s';
function frame(){
if (width <= 0) {
clearInterval(id);
} else
{
var dmgDone = Math.floor((Math.random() * 15) + 5);
var enemyDmgDone = Math.floor((Math.random() * 10) + 1);
var percentHP = enemyDmgDone/enemyHp * 100;
var percentHP2 = dmgDone/maxHp * 100;
maxHp = maxHp - enemyDmgDone;
enemyHp = enemyHp - dmgDone;
width = width - percentHP;
width2 = width2 - percentHP2;
elem.style.trasition = 'width ' + percentHP + 's';
elem2.style.trasition = 'width ' + percentHP2 + 's';
/* document.getElementById("weapon").classList.add('animation1'); */
/* document.getElementById('weapon').classList.remove('animation1'); /*nie działa gdzie bym nie dał*/
if(dmgDone >= enemyHp){
elem2.style.width = 0 + "%";
document.getElementById('weapon').classList.remove('animation1');
} else {
elem.style.width = width + '%';
elem2.style.width = width2 + '%';
}
}
}
}
Problem czemu nie działa wewnątrz setInterval(), nawet jak stawie czas na 5000 czy więcej nie pomaga. Na zewnątrz usuwanie i dodawanie klas normalnie działa i a w tym przypadku nie i nie mam pojęcia czemu to jest spowodowane. A to ważne bo chce, żeby przy starcie tego animacja się włączała(powtarzała tyle razy ile potrzebuje) a po zakończeniu tego eventu znikała.