我有一個(gè)創(chuàng)建& ltspan & gt每隔1000毫秒，將其添加到一個(gè)& ltp & gt元素通過它的appendChild函數(shù)。這些跨度的不透明度的過渡設(shè)置為3，000毫秒，我有一個(gè)setTimeout，它在10毫秒后將不透明度從初始值0.3更改為1.0，也就是說，在添加元素后，它立即開始過渡。

我的問題是一旦一個(gè)新的& ltspan & gt被添加到& ltp & gt任何當(dāng)前動(dòng)畫元素跳過其過渡直到結(jié)束，突然達(dá)到最終的1.0值。為什么會這樣？我不能在不影響當(dāng)前運(yùn)行的轉(zhuǎn)換的情況下向容器中添加元素嗎？

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>