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

Posted 2023-03-06

【中文标题】使用现代 CSS 过渡使文本立即出现但逐渐淡出

【英文标题】：Make text appear immediately but fade out gradually using modern CSS transitions

【发布时间】：2018-01-12 09:59:18

【问题描述】：

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

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

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

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

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

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

【问题讨论】：

您是否有一个 CSS 文件也可以在您的 span 上添加一个过渡？如果是这样，执行span.style.transition = ''; 不会删除转换，因为它正在更改 DOM 属性style=""。你可以试试span.style.transition = 'none';

另外，您的代码似乎与您的问题相反？ opacity:0; 表示透明，淡入不透明（opacity:1;），但您的问题是“立即出现但淡出”

没有。到目前为止，我的原型中几乎没有 CSS，这是我投入其中的第一批 CSS 之一。我确实尝试过'none'，但消息现在淡入一次（而不是淡出）并且保持完全不透明，无论后续调用这段代码。

好的，如果你把你的javascript的第2行和第5行颠倒过来，我想你应该有你想要的？

不，我试过了，修复了那部分代码，并赞成您指出该特定错误的评论。但这不是固定的。

【参考方案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。

【讨论】：

哇，谢谢！我很惊讶它需要某种技巧。我以为我在初学者级别错过了一些非常明显的东西！