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

Question

我正在尝试制作 4 个图标的动画，以 模拟 wifi 信号 和 Javascript，但是在达到最后一个信号后动画不会再次重新启动。这是我试过的。我将不胜感激任何帮助和想法如何通过 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>

Answer 1

好吧，我不知道这是否有效，但似乎在最后一个 setTimeout 中，你使用了 wifi_icon.classList.add('ri-signal-wifi-3-line')，然后在函数开始时（下一个循环），你永远不要删除 class。所以添加如下内容：

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

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

Unable to animate the icons with Javascript

javascript

css

icons

font-awesome