Question

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

问题似乎与breakChain（）;中的setTimeout函数有关。当setTimeout低于100毫秒时，第二个图标状态会在加载时立即显示。加载时会出现任何更高的图标状态。状态之间没有转换（“我确实知道这个代码，只会在初始图标和第二个图标之间转换一次”）

<!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>

Answer 1

想出来。我不小心带来了字体真棒js而不是链接到css ... oops。

<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>

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

1 个答案: