点击不同按钮时如何让同一个DIV重复淡入以提示数据更新

问题根源 #

首次点击后div的opacity属性已经被设为1，后续点击时没有属性值的变化，无法触发transition过渡动画，也没有先重置透明度为0的逻辑，自然只有第一次能看到淡入效果。

修复代码 #

只需要修改JS逻辑，先重置透明度，等待浏览器重绘完成后再更新内容并触发淡入即可，原有CSS和HTML无需改动：

function showMe(n){          
  const myDiv = document.getElementById('myDiv');
  // 先置为透明，触发消失效果
  myDiv.style.opacity = '0';
  // 两层requestAnimationFrame确保浏览器完成重绘，不会合并两次opacity修改
  requestAnimationFrame(() => {
    requestAnimationFrame(() => {
      myDiv.innerHTML = n === 1 ? "Hello Data" : "Another Data";
      myDiv.style.opacity = '1';
    })
  })
}

如果你希望等待div完全消失后再更新内容，可以改用transitionend事件监听，效果更丝滑：

function showMe(n){          
  const myDiv = document.getElementById('myDiv');
  // 先清空之前的绑定，避免重复触发
  myDiv.removeEventListener('transitionend', updateContent);
  myDiv.style.opacity = '0';

  function updateContent() {
    myDiv.innerHTML = n === 1 ? "Hello Data" : "Another Data";
    myDiv.style.opacity = '1';
    myDiv.removeEventListener('transitionend', updateContent);
  }

  myDiv.addEventListener('transitionend', updateContent);
}

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