如何使用CSS transition与JavaScript实现每次点击文本均淡入而非仅首次

你的代码仅首次点击生效的核心原因是：首次点击后#data元素的opacity属性会被永久设为1，后续点击时没有发生属性值变更，自然不会触发CSS transition过渡效果。

要实现每次点击都触发淡入，需要每次点击时先将透明度重置为0，等待浏览器确认该样式生效后，再将透明度改回1触发过渡。
注意不能连续同步设置opacity = 0和opacity = 1，浏览器会合并同一次事件循环内的样式变更，导致过渡不会被触发，这里推荐用requestAnimationFrame来等待渲染帧完成，时序更精准。

完整修正代码 #

<style>
/* 建议明确指定过渡属性，避免不必要的性能消耗 */
#data {
    transition: .7s opacity;
}
</style>

<h1 id="data"></h1>
<a href="#" id="clicker">click 1</a>

<script>
const dataEl = document.getElementById('data');
dataEl.style.opacity = 0;

function go(event){
    event.preventDefault();
    // 先重置透明度为0
    dataEl.style.opacity = 0;
    // 等待两个渲染帧，确保opacity=0已被浏览器应用
    requestAnimationFrame(() => {
        requestAnimationFrame(() => {
            dataEl.innerHTML = 'test';
            dataEl.style.opacity = 1;
        })
    })
}

document.getElementById('clicker').addEventListener('click', go);
</script>

简化兼容方案 #

如果你的场景允许极小的延迟，也可以用setTimeout实现，写法更简单：

function go(event){
    event.preventDefault();
    const dataEl = document.getElementById('data');
    dataEl.style.opacity = 0;
    setTimeout(() => {
        dataEl.innerHTML = 'test';
        dataEl.style.opacity = 1;
    }, 10)
}

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