Сделайте так, чтобы текст появлялся сразу, но постепенно исчезал, используя современные 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;, который, кажется, делает своего рода сброс. Я нашел это здесь.