Adding a child element to a container resets any ongoing css property transitions in other child elements

I have a script that creates a <span> every 1,000 ms, adding it to a <p> element through its appendChild function. The transition for opacity for these spans is set at 3,000 ms, and I have a setTimeout that changes the opacity from its initial value of 0.3 to 1.0 after 10 ms, i.e., right after the element is added it begins transitioning.

The issue I'm having is that once a new <span> is added to the <p> any currently animating element skips its transition til its end, suddenly arriving at the final 1.0 value. Why is this happening? Can't I add an element to a container without messing with currently running transitions?

const text = `This is just an example`;
const words = text.replace(/\n/g, ` `).split(` `).filter(i => i);
let i = 0;

function add() {
  const container = document.getElementById('container'),
    span = document.createElement('span'),
    id = `s${i}`;
  span.innerText = words[i % words.length];
  span.setAttribute(`id`, id)
  const addedSpan = container.appendChild(span);

  setTimeout(() => {
    const el = document.getElementById(id);
    el.style.opacity = '1';
  }, 10);
  container.innerHTML += ` `;
  i++;
}

const t = setInterval(add, 1000);

#container {
  margin: 0;
  font-size: 2rem;
}

#container span {
  transition: all 3s ease;
  opacity: 0.3;
}

<p id="container">
</p>

Via Active questions tagged javascript - Stack Overflow https://ift.tt/eM5WYGC