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

Question

I'm OK at JavaScript but bad at CSS and completely new to transitions and fades.

Examples that I've looked at that were simple enough to understand at a glance did fading both in and out.

Examples that did closer to what I want didn't seem as simple to grok so quickly, but then again those questions didn't ask specifically and only what I'm asking here.

I'll set the text and initiate the fading with JS but is there a way where that's all I have to do, ignoring when the fade is finished?

I've tried just removing the transition style and setting the opacity, then adding the text and putting the transition style back in and setting the new opacity, which doesn't work:

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

Answer 1

Based on the comments, I believe this is the solution you are looking for:

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>

Note especially the line void span.offsetWidth;, which seems to do some sort of a reset. I found this out here.