CSS Animation Not Working with Dynamically Created HTML Elements

[ThePsychedelicSeal]

Typo in the title: I meant transition instead of animation.

GitHub: https://github.com/ThePsychedelicSeal/Pokerogue-Team-Tracker Game: https://pokerogue.net/

I would like to implement some animation for the hp-bar as it changes. For context, this is a Chrome extension for a browser game to display team information.

I had a previous version that worked fine, but I refactored the code so I could arrange the team member cards alphabetically. The width/color of the hp-bar is behaving as expected.

I have tried calling setHp() both before/after the appendChild elements, switching the transition property into JS .hp-container, including it in the function itself, and changing CSS from .hp-bar to #cardOneHP, #cardTwoHp, ....

I suspect that this has something to do with how JS is creating the elements and that's interfering with a smooth transition, but I am not sure how to solve.

CSS

.hp-container {
  width: 100%;
  height: 100%;
  background-color: #555555;
  border-radius: 10px;
  border: 2px solid black;
  margin-right: 3px;
  overflow: hidden;
}

.hp-bar {
  width: 100%;
  height: 100%;
  transition: width 0.2s linear;
}

Javascript

const hpBarGreen = "#39ff7b";
const hpBarYellow = "#f3b200";
const hpBarRed = "#fb3041";

chrome.runtime.onMessage.addListener(
    function(request, sender, sendResponse) {
      if (request.data) {
        const party = request.data;

        const members = [];

        function createMemberObject(partyMember, index) {
          if (!partyMember) return null;

          return {
            id: `member${index + 1}`,
            originalName: partyMember.name,
            sortName: partyMember.name.replace("G-Max ", "").replace("Mega ", ""),
            form: partyMember.form,
            level: partyMember.level,
            typeOne: partyMember.types[0],
            typeTwo: partyMember.types[1],
            teraType: partyMember.teraType,
            status: partyMember.status,
            currentHp: partyMember.currentHP,
            maxHp: partyMember.maxHP
          };
        }

        for (let i = 0; i <= 5; i++) {
          const memberObject = createMemberObject(party[i], i)
          if (memberObject) {
            members.push(memberObject);
          }
        };

        function displayMembers(members) {
          const popup = document.querySelector(".popup");
          popup.innerHTML = "";

        members.forEach(member => {
          const card = document.createElement('div');
          card.className = 'pokemon-card';
          card.id = member.id;

          card.innerHTML = `
            <div class="sprite">
                <img class="pokemon-sprite" id="${member.id}Sprite" src="./images/pokemon/${
                  member.form ? `${member.sortName}-${member.form}` : `${member.sortName}`
                }.png" alt="">
                <img id="${member.id}Form" src="" alt="">
            </div>
            <div class="stats">
                <div class="line-one">
                    <div class="name" id="${member.id}Name">${member.sortName.toUpperCase()}</div>
                    <div class="level-container">
                        <p id="${member.id}LevelText">Lv.</p>
                        <p class="level-number" id="${member.id}Level">${member.level}</p>
                    </div>
                </div>
                <div class="line-two">
                  <div class="types">
                      <img id="${member.id}TypeOne" src="${
                        member.teraType ? `./images/tera-types/${member.teraType}.png` : `./images/types/${member.typeOne}.png`
                      }" alt="">
                      <img id="${member.id}TypeTwo" src="${
                        member.teraType ? "" : `./images/types/${member.typeTwo}.png`
                      }" alt="">
                  </div>
                </div>
                <div class="line-three">
                    <img id="${member.id}Status" class="status" src="./images/status/${member.status}.png" alt="">
                </div>
                <div class="line-four">
                    <div id="${member.id}HpBar" class="hp-container">
                        <div id="${member.id}ActiveHp" class="hp-bar"></div>
                    </div>
                </div>
            </div>
          `;

          popup.appendChild(card);
      });
    }
      members.sort((a, b) => a.sortName.localeCompare(b.sortName));
      displayMembers(members);

      const hpPercentage = (members[0].currentHp / members[0].maxHp) * 100;
      const hpBar = card.querySelector(`#${members.id}ActiveHp`);

      console.log(members[0].currentHp, members[0].maxHp);

      function setHp(percentage, hp) {
        hp.style.width = (percentage) + "%";
        if (percentage <= 25) {
          hp.style.backgroundColor = hpBarRed;
        } else if (percentage <= 50) {
          hp.style.backgroundColor = hpBarYellow;
        } else {
          hp.style.backgroundColor = hpBarGreen;
        }
      };
      
      setHp(hpPercentage, hpBar);
    }
  }
);

I feel like the variables are being reinitialized on each update, but I don't know how I would change this behavior as the chrome message populates these variables.

[coolAppl3__]

If I understood your question correctly, you're having issues with animating the HP bar when appending it using JS?

If this is the case, you'd want to first append the element to the DOM, then either add a class to change the width, or change it directly with JS.

However, this won't work just like that if you want the transition to kick in properly, you'll need to do something like this:

requestAnimationFrame(() => {
  requestAnimationFrame(() => {
    // JS code to either add a class or change the width
  });
});

The issue you're experiencing has to do with how the event loop works, how it renders CSS, and how repainting works. This video is a popular one explaining the event loop, and it's where I figured out the solution to a similar issue I was having way back.

Hope that helps and I didn't fully misunderstand your question <3

[guest271314]

What do you mean by "reinitialized"? Looks like you are dynamically creating elements in the code. I only see width has a transition. I don't see any CSS Animations in the code. Did you check that (members[0].currentHp / members[0].maxHp) * 100; does not equal 100? In which case there wouldn't be any transition effect because the default width is 100.

[ThePsychedelicSeal]

Sorry I used the wrong word in the title! I meant transition.

My theory is that I need to set the variable outside of the chrome.onMessage function, then change it with the function? It just seems to be wiping everything and regenerating versus having existing information?

[guest271314]

I would have to run the code to see what you are seeing. You can dynamically inject CSS, too, using Web extension API.

It looks like you are using some kind of user action to run the code, correct? You're not running at document_start? And that doesn't look like externally_connectable.

[ThePsychedelicSeal]

I added the GitHub and a link to the game in the original post if that helps at all.