使用现代 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

根据评论，我相信这就是您正在寻找的解决方案：

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。

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

Make text appear immediately but fade out gradually using modern CSS transitions

javascript

css

fade

opacity

css-transitions