使用现代 CSS 过渡使文本立即出现但逐渐淡出

Question

我在 JavaScript 方面还可以，但在 CSS 方面很差，而且对过渡和淡入淡出完全陌生。

我看过的那些简单到一眼就能理解的例子确实淡入淡出。

与我想要的更接近的示例似乎并不那么容易这么快就理解，但话说回来，这些问题并没有具体提出，而只是我在这里提出的问题。

我将设置文本并使用 JS 启动淡入淡出，但有没有办法让我只需要这样做，而忽略淡入淡出完成的时间？

我尝试删除过渡样式并设置不透明度，然后添加文本并将过渡样式放回并设置新的不透明度，但这不起作用：

span.style.transition = '';
span.style.opacity = '1';
span.textContent = 'fading message';
span.style.transition = 'opacity 1s';
span.style.opacity = '0';

Answer 1

基于 cmets，我相信这是您正在寻找的解决方案：

document.getElementById('btn_click').addEventListener('click', function() {
    var span = document.getElementById('fader');
    
    span.style.transition = 'none';
    span.style.opacity = '1';
    span.textContent = 'fading message';
    
    /* This line seems to 'reset' the element so that the transition can be run again. */
    void span.offsetWidth;
    
    span.style.transition = 'opacity 1s';
    span.style.opacity = '0';
});

<div>
  <span id="fader"></span><br/>
  <button id="btn_click">Click to fade</button>
</div>

特别注意void span.offsetWidth; 行，它似乎做了某种重置。我发现了这个here。