Font-Awesome - значок-спин не вращается, когда скрыт, а затем отображается

Когда моя страница загружается, я скрою значок icon-refresh + icon-spin, установив для свойства display значение none.

Теперь, после выполнения какого-либо действия, я хочу отобразить этот значок. Я вызываю метод jQuery .show() на значке. Однако, пока отображается значок, значок больше не вращается.

Если я загружу его, не скрывая его изначально, он вращается. Но не тогда, когда он скрыт и отображается позже.

EDIT: Если это не было ясно из названия, я использую Шрифт Awesome для отображения значков

Ответ 1

Вы должны использовать $element.css("display","inline-block"); вместо .show();

Ответ 2

Старая тема, но у меня была аналогичная проблема с тем, что "fa-spin" не работал после того, как содержащий элемент был скрыт с помощью {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", а затем добавив его с небольшой задержкой, он сделал все, что было для меня.

Ответ 3

Вы вызываете "$ ('# mySpinnerElement'). hide()?

Я изменил это на document.getElementById('mySpinnerElement'). style.display = 'none';

и мой счетчик вращается при последующих вызовах

НТН

Болотистый

Ответ 4

Кажется, что IE10 не запускает анимацию вращения, если начальное состояние отображения none. Я обнаружил, что динамическое изменение отображения на inline-block не вызвало анимацию вращения. Перемещение эквалайзера с экрана помогло решить проблему. Например:

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