Font-Awesome - 아이콘 스핀이 숨겨져 있고 회전하지 않을 때

내 페이지가로드되면 display 속성을 none으로 설정하여 icon-refresh + icon-spin 아이콘을 숨 깁니다.Font-Awesome - 아이콘 스핀이 숨겨져 있고 회전하지 않을 때

이제 몇 가지 작업을 수행 한 후이 아이콘을 표시하고 싶습니다. 아이콘에 jQuery의 .show() 메소드를 호출합니다. 그러나 아이콘이 표시된 동안에는 아이콘이 더 이상 회전하지 않습니다.

처음에 숨기지 않고로드하면 회전합니다. 하지만 숨겨진 후 나중에 표시되지 않습니다.

편집 :이 제목에서 분명 아니었다면, 나는

출처

2013-04-11 user109187

이것은 나를 위해 작동하는 것 같다 : http://jsfiddle.net/RXkwq/ (JSFiddle WebFont 문제는 견딜 수 없다) –

여기 같은 문제 – Bakaburg

나는 같은 문제가있다. Firefox 35에서만 발생합니다. 아래 답변으로 저를 해결하지 못했습니다 – totas

당신이 ('#의 mySpinnerElement') $ "호출하는 아이콘을 표시 Font Awesome을 사용하고 있습니다) (숨길

나는 것으로 변경되었습니다.? . document.getElementById를로 ('mySpinnerElement') style.display를 = '없음';

내 스피너는 후속 호출에 회전하지

HTH

늪

출처

2013-05-27 12:08:24 SwampyFox

당신은 대신 .show();

출처

2013-07-01 11:26:20

Safari와 Firefox에서 해결되었습니다. 이전에는 Chrome에서 작업했습니다. 나는 아직 다른 것을 테스트하지 않았다. ...'.show()'가 css transform을 지원하지 않는'display : inline'을 설정하는 것을 궁금해하는 사람들을 위해서 –

을 작성한다. http://stackoverflow.com/questions/14883250/css-transform-doesnt-work-on-inline-elements를 참조하십시오. – wal

의 $element.css("display","inline-block");를 사용할 필요가 초기 표시 상태가 none 경우 IE10은 스핀 애니메이션을 실행하지 않는 것 같습니다. 동적으로 디스플레이를 inline-block으로 변경하면 스핀 애니메이션이 실행되지 않습니다. 스피너를 화면 밖으로 옮기면 문제가 해결됩니다. 예컨대 :

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

출처

2014-03-03 10:37:39 johnhunter

오래된 주제,하지만 난 "FA-스핀"포함하는 요소가 {가시성 : 숨겨진} 숨겨진 된 후 작동하지 않는 비슷한 문제가 있었다, 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

Font-Awesome - 아이콘 스핀이 숨겨져 있고 회전하지 않을 때

답변

관련 문제