Пользовательский атрибут данных jQuery с CSS

Question

Я использую animate.css и сейчас у меня есть стиль CSS для animated2500 , что означает, что для анимации потребуется 2,5 секунды.Стиль:

.animated2500 {
    -webkit-animation: 2500ms ease;
    -moz-animation: 2500ms ease;
    -ms-animation: 2500ms ease;
    animation: 2500ms ease;
}

Так что в моем HTML я бы сделал:

<p class="animated2500 pulse">Takes 2.5 seconds to pulse</p>

Хотя должен быть более простой способ сделать это, потому что я хочу указать, сколькосекунд, не создавая для него пользовательский класс каждый раз.

Есть ли способ использовать пользовательский атрибут данных, такой как: <p data-delay="5000" class="fade">Fade in 5 econds</p> это сработает?

Как я могу добиться чего-то подобного?

Спасибо!

Answer 1

Я не думаю, что вы можете использовать чистый CSS для этого, лучше использовать отдельные стили.

Если вы действительно хотите использовать атрибут data-*, так как вы пометили свой вопрос jquery, я выложу ответ, специфичный для jQuery, хотя CSS-анимации и атрибуты данных не относятся к jQuery (или даже JavaScript):

jQuery(function($) {
    $(".pulse[data-delay]").each(function() {
        var value = parseInt(this.getAttribute("data-delay"), 10);
        if (!isNaN(value)) {
            value = value + "ms ease";
            this.style["-webkit-animation"] = value;
            this.style["-moz-animation"] = value;
            this.style["-ms-animation"] = value;
            this.style["animation"] = value;
        }
    });
});

, который проходит через элементы в DOM ready и применяет стильнепосредственно.Мне это не нравится по нескольким причинам (не в последнюю очередь, что новые элементы, добавленные в пост-загрузку страницы, не будут обрабатываться), но если вы действительно, действительно не хотите создавать определенные классы ...

Answer 2

$(document).ready(function() {
    $("p[data-delay]").each(function(){
        this.style.webkitAnimationDuration = $(this).attr('data-delay') + 's';
    );
});

Answer 3

может как то так будет работать? (Непроверенные)

$(document).ready(function() {
    $("p[data-delay]").each(function(){
        $(this).css('-webkit-animation',$(this).attr('data-delay')+'ms ease');
        $(this).css('-moz-animation',$(this).attr('data-delay')+'ms ease');
        $(this).css('-ms-animation',$(this).attr('data-delay')+'ms ease');
        $(this).css('animation',$(this).attr('data-delay')+'ms ease');
        }
    );
});