为何showLoadingAndResetAnimation无法正确淡入，而showLoading可以？

核心问题出在DOM节点替换后的样式更新被浏览器合并优化了，导致过渡效果无法触发：

• showLoading函数是直接操作已有DOM元素：从初始的opacity: 0（CSS定义）切换到opacity: 1（内联样式），这个状态变化会被浏览器捕捉到，从而触发CSS过渡动画。
• showLoadingAndResetAnimation函数是通过深拷贝节点替换原节点，这里有两个关键问题：
  1. 如果原节点已经被设置过opacity: 1，深拷贝出来的新节点会继承这个内联样式，插入DOM后直接就是完全不透明状态，自然没有过渡。
  2. 即使是第一次调用，新节点插入DOM后你立即设置opacity: 1，浏览器会把「插入节点（初始opacity=0）」和「设置opacity=1」这两个操作合并成一次重绘，相当于节点从一开始就是opacity: 1，跳过了状态变化的过程，过渡也就不会触发。

要让替换后的节点触发过渡，需要给浏览器一个渲染节点初始状态的时间，再执行opacity的修改。可以用requestAnimationFrame来实现这个延迟：

function showLoadingAndResetAnimation() {
  var elem = document.getElementsByClassName("main")[0];
  // 深拷贝节点，移除内联的opacity样式以恢复初始状态
  var newElem = elem.cloneNode(true);
  newElem.style.opacity = '';
  elem.parentNode.replaceChild(newElem, elem);
  
  // 等待浏览器渲染新节点的初始状态后，再设置opacity
  requestAnimationFrame(() => {
    newElem.style.opacity = 1;
  });
}

同时要确保你的CSS中给.main定义了明确的过渡规则，比如：

.main {
  opacity: 0;
  transition: opacity 0.5s ease;
  /* 其他样式 */
}

这样修改后，新节点插入DOM后会先以opacity: 0的状态渲染，然后在下一帧被设置为opacity: 1，状态变化被浏览器捕捉，过渡动画就能正常触发了。

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