无法使用 Javascript 为图标设置动画答案

【问题标题】：Unable to animate the icons with Javascript无法使用 Javascript 为图标设置动画
【发布时间】：2021-07-07 19:27:23
【问题描述】：

我正在尝试使用 Javascript 为 4 个图标设置动画以模拟 wifi 信号，但是在达到最后一个信号之后动画不会再次重新开始。这是我尝试过的。我将不胜感激任何帮助和想法如何实现这一点 CSS 或 Javascript。

function makeSignal(){
        let wifi_icon = document.getElementById("wifi-signal");
        wifi_icon.classList.add('ri-signal-wifi-line');

        setTimeout(function() {
            wifi_icon.classList.remove('ri-signal-wifi-line');
            wifi_icon.classList.add('ri-signal-wifi-1-line');
        }, 500);

        setTimeout(function() {
            wifi_icon.classList.remove('ri-signal-wifi-1-line');
            wifi_icon.classList.add('ri-signal-wifi-2-line');
        }, 1000);

        setTimeout(function(){
            wifi_icon.classList.remove('ri-signal-wifi-2-line');
            wifi_icon.classList.add('ri-signal-wifi-3-line');
        }, 1500);
}

makeSignal();
setInterval(makeSignal, 2000);

#signal {
    display: block;
    width: 100px;
    height: 100px;
    margin: 5px auto;
    
}

<link href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css" rel="stylesheet">

<div id="signal">
     <i id="wifi-signal" class="ri-5x"></i>
</div>

【问题讨论】：

标签： javascript css icons font-awesome

【解决方案1】：

好吧，我不知道这是否可行，但似乎在最后一个setTimeout 中，您使用了wifi_icon.classList.add('ri-signal-wifi-3-line')，然后在函数的开头（下一个循环），您永远不会删除该类。所以添加如下内容：

let wifi_icon = document.getElementById("wifi-signal");
wifi_icon.classList.remove('ri-signal-wifi-3-line');
wifi_icon.classList.add('ri-signal-wifi-line');

【讨论】：