我在教程中遵循一个非常简单的代码，无法理解为什么我的字体很棒图标没有从第一个图标（链接）转换到第二个（链接断开）。
问题似乎是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 = "";
setTimeout(function() {
chain.innerHTML = "";
}, 1000);
}
breakChain();
</script>
</body>
</html>
弄清楚了。我不小心带来了字体真棒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 = "";
setTimeout(function() {
chain.innerHTML = "";
}, 1000);
}
breakChain();
</script>
</body>
</html>