@vohaha

Как обращаться к @keyframes в jQuery?

Нужно изменять width в keyframes при изменении js-переменной "counter".
Есть код в css
...
@-webkit-keyframes progress { 
    from { }

    to { width: 100% }
}

@-moz-keyframes progress { 
    from { }

    to { width: 36% }
}

@-ms-keyframes progress { 
    from { }

    to { width: 36% }
}

@keyframes progress { 
    from { }

    to { width: 36% }
}
...

И есть код js
$(document).ready(function() {
        $('.b-inputForm__button').data('counter', 1).click(function() {
            var counter=$(this).data('counter');
            $(this).data('counter', counter+1);
            $('.b-progressbar__title').html(counter+" из 10");
            var toAdd = $('.b-inputForm_textArea').val();
            if (counter===10){$('.b-inputForm__button').attr('disabled',true)}
            $('.b-names__string').append(toAdd + ", ");
        });
});
  • Вопрос задан
  • 5097 просмотров
Решения вопроса 2
Petroveg
@Petroveg
Миром правят маленькие с#@&ки
Правильный подход — менять в JS только классы. Менять правила с помощью атрибута style нужно в крайнем случае. А в случае с animation это вообще невозможно — анимация, как и любое @rule, описывается отдельно от элементов.

Если нужно создать много правил, основываясь на данных, которые появятся только в скрипте, используем insertRule у объекта из коллекции document.styleSheets. В этих правилах вы сформируете имена animation и привяжете их к классам.

Вот примерно так codepen.io/cleric/pen/FqIaD
Причём тут я пошёл на поводу простоты и вместо классов оперирую атрибутом style. Но в боевых условиях я бы подумал 10 раз — могут меняться и другие параметры (продолжительность и прочее).
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы