向容器添加子元素为何会中断其他子元素的CSS过渡效果？

问题原因 #

你代码里的container.innerHTML += ;是导致现有过渡被打断的核心原因。当执行innerHTML +=操作时，浏览器会：

• 将容器内所有现有DOM元素转换成HTML字符串
• 拼接上新的内容（这里是一个空格）
• 把拼接后的字符串重新解析为新的DOM元素，完全替换掉容器原来的内容

这个过程会销毁所有已存在的<span>元素，再重新创建它们。新创建的元素会直接应用当前的样式状态（也就是已经被设置为opacity:1），所以正在执行的过渡动画会被强制终止，瞬间跳到最终效果。

解决方案 #

改用DOM原生方法添加空格，避免销毁现有元素。把container.innerHTML += ;替换成创建文本节点的方式：

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)
  container.appendChild(span);
  // 替换innerHTML += 为创建文本节点
  container.appendChild(document.createTextNode(' '));

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

const t = setInterval(add, 1000);

对应的CSS和HTML保持不变：

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

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

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

这样每次添加新元素和空格时，只会在容器末尾追加新节点，不会触动已存在的<span>元素，正在执行的过渡动画就能正常完成了。

内容的提问来源于stack exchange，提问作者calua