字体真棒 - 图标旋转隐藏时不旋转，然后显示

当我的页面加载时，我通过将其display属性设置为无，隐藏icon-refresh + icon-spin图标。字体真棒 - 图标旋转隐藏时不旋转，然后显示

现在，执行某些操作后，我希望显示此图标。我在图标上调用jQuery的.show()方法。但是，显示图标时，图标不再旋转。

如果我最初没有隐藏它，它会旋转。但是，当它隐藏并稍后显示时不会。

编辑：如果不是从标题明确，我使用Font Awesome显示图标

来源

2013-04-11 user109187

这似乎为我工作：http://jsfiddle.net/RXkwq/（JSFiddle WebFont问题不能承受） – 2013-04-11 20:13:54

同样的问题在这里 – Bakaburg 2013-09-05 21:37:55

我有同样的问题。只发生在Firefox 35中。下面的答案并没有为我解决这个问题 – totas 2015-02-02 15:31:26

你打电话“$（‘＃mySpinnerElement’）隐藏（）

我改变了这一切？至的document.getElementById（ 'mySpinnerElement'）的style.display = '无';

和我的旋转器旋转在后续调用

HTH

沼泽

来源

2013-05-27 12:08:24 SwampyFox

你必须使用$element.css("display","inline-block");代替.show();

来源

2013-07-01 11:26:20

这解决了它在Safari和Firefox中的问题。它以前在Chrome中工作。我还没有测试过其他任何东西...... – 2015-03-19 15:13:13

万一有人想知道'.show（）'设置'display：inline'不支持css转换。见http://stackoverflow.com/questions/14883250/css-transform-doesnt-work-on-inline-elements – wal 2017-05-19 00:32:07

看来，如果初始显示状态是none IE10不运行的旋转动画。我发现动态改变显示为inline-block并没有触发旋转动画。将屏幕移动到屏幕外解决了问题。 E.g：

.icon-spinner { 
    position: absolute; 
    left: -9999px; 
} 
.is-pending .icon-spinner { 
    left: 0; 
}

来源

2014-03-03 10:37:39 johnhunter

老话题，但我有“发旋”未包含的元素与{visibility：hidden的隐藏}工作后，类似的问题，用jQuery设置。以前也有一些其他动画涉及，这可能导致时序问题，等等

此修复程序是包含元素上设置一个触发事件，就使其可见再次，它会触发此功能：

ply_obj.container.on(
      'controlsshown', 
      function() { 

       if (ply_obj.config.loop_tf) { 
        ply_obj.loop_icon.removeClass('fa-spin'); 
        setTimeout(function() { ply_obj.loop_icon.addClass('fa-spin'); }, 100); 
       } 
      } 
     );

因此，删除“fa-spin”，然后将它加回一个小的延迟，使其按照我的需要工作。

来源

2015-12-04 16:18:30

字体真棒 - 图标旋转隐藏时不旋转，然后显示

回答

相关问题