Font Awesome setTimeout 函数无法动画（Javascript）答案

【问题标题】：Font Awesome setTimeout function failing to animate (Javascript)Font Awesome setTimeout 函数无法动画（Javascript）
【发布时间】：2018-08-11 07:23:34
【问题描述】：

我正在遵循教程中的一个非常简单的代码，但无法理解为什么我的字体真棒图标没有从第一个图标（链接）过渡到第二个（断开的链接）。

问题似乎出在 breakChain(); 中的 setTimeout 函数上。当 setTimeout 低于 100ms 时，第二个 Icon 状态在加载时立即出现。任何更高的初始图标状态都会在加载时出现。状态之间没有转换（“我确实知道这段代码，按原样，只会在初始图标和第二个图标之间转换一次”）

<!DOCTYPE html>
<html lang="en">

<head>
    <script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
    <meta charset="UTF-8">
    <title>Animated Icons</title>
</head>
<style type="text/css">
#chain {
    font-size: 50px;
}
</style>

<body>
    <div id='chain' class="fa"></div>
    <script>
    function breakChain() {
        let chain = document.getElementById('chain');
        chain.innerHTML = "&#xf0c1;";

        setTimeout(function() {
            chain.innerHTML = "&#xf127;";
        }, 1000);
    }
    breakChain();
    </script>
</body>

</html>

【问题讨论】：

似乎新的 font-awesome 用 svg 替换了你的 html 元素。我的猜测是，当您将超时设置为 1000 时，font awesome 会设法完成替换过程，此时您没有要更改的 html 元素。 fontawesome.com/how-to-use/svg-with-js
看看这个可能的解决方案：fontawesome.com/how-to-use/svg-with-js

标签： javascript html unicode settimeout font-awesome

【解决方案1】：

想通了。我不小心引入了令人敬畏的 js 字体，而不是指向 css 的链接...哎呀。

<head>
    <script defer src="https://use.fontawesome.com/releases/4.0.7/js/all.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <meta charset="UTF-8">
    <title>Animated Icons</title>
</head>
<style type="text/css">
#chain {
    font-size: 50px;
}
</style>

<body>
    <div id='chain' class="fa fas"></div>
    <script>
    function breakChain() {
        let chain = document.getElementById('chain');
        chain.innerHTML = "&#xf0c1;";

        setTimeout(function() {
            chain.innerHTML = "&#xf127;";
        }, 1000);
    }
    breakChain();
    </script>
</body>

</html>

【讨论】：