Font Awesome setTimeout函数无法动画（Javascript）
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Font Awesome setTimeout函数无法动画（Javascript）相关的知识，希望对你有一定的参考价值。
我在教程中遵循一个非常简单的代码，无法理解为什么我的字体很棒图标没有从第一个图标（链接）转换到第二个（链接断开）。
问题似乎是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>
以上是关于Font Awesome setTimeout函数无法动画（Javascript）的主要内容，如果未能解决你的问题，请参考以下文章
我是否必须从导入中重新列出所有React Font Awesome图标并添加到库中？
Vue CLI + Font Awesome 5 Production Build - 无图标（Font Awesome\ 5 免费）