字體真棒 - 圖標旋轉隱藏時不旋轉，然後顯示

當我的頁面加載時，我通過將其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

字體真棒 - 圖標旋轉隱藏時不旋轉，然後顯示

回答

相關問題