我想让一个图标在一段时间后消失，我想让另一个图标在一秒钟延迟后占据其位置.我用的字体真棒

Question

好吧，我怎么能让字体消失一段时间后，另一个图标以一秒钟的延迟取代它的位置，这个东西应该在一个循环中进行，我正在使用字体awesome所以请帮助。

Answer 1

你可以这样做

const switchIcon = (container,newHtml, timeout) => {

setTimeout(() => {
container.innerHTML = ''
setTimeout(() => {
container.innerHTML = newHtml
}, 1000)
}, timeout)

}

switchIcon(document.getElementById('icon-container'), '<span> icon 2</span>', 3000)

<div id="icon-container">
<span>icon 1</span>
</div>

Answer 2

在你的css顶部插入

@keyframes icon1 {
0%   {opacity: 1; z-index: 1000;} 
/* Change opacity as you like 1= visible 0=not visible, you can also add other % like 20% 10% to make it happen faster and add any css property*/
50%  {opacity: 0.5;}
100% {opacity: 0; z-index: -1;}
}
@keyframes icon2 {
0%   {opacity: 0; z-index: -1;} /* Change opacity as you like 1= visible 0=not visible */
50%  {opacity: 0.5;}
100% {opacity: 1; z-index: 1000;}
}
/*If you need it clickable just add z-index or insead of z-index add visibility: hidden when opacity is 0 and visibility: visible to opacity 1*/

then add this to your first icon's css
animation-name: icon1;
animation-duration: 4s; //change seconds
animation-iteration-count: infinite;

and this to your second icon's css
animation-name: icon2;
animation-duration: 4s; /* Change seconds */
animation-iteration-count: infinite;

我没有让它像你一样工作，但你可以改变它们之间的值。你可以使用绝对位置来让它们站在彼此的顶部，记住绝对位置需要顶部或底部:(任意px) px;左或右:(任意px) px;同时将parent设置为relative

你也可以添加过渡属性，使其平滑，总是在图标的css示例