Использование функции CSS attr() и тегов данных для тайминга анимации

Мне интересно, я могу комбинировать теги данных с анимациями в CSS. У меня есть список элементов undefined, которые обрабатываются механизмом шаблонов javascript. Как только JS закончил их рендеринг, я хотел бы их затухать один за другим без необходимости писать огромную группу селекторов CSS. Это была моя первоначальная мысль, когда у меня было всего 6 элементов, добавленных динамически. Из-за того, что он может получить сумму undefined и должен выглядеть хорошо, я столкнулся с описанной проблемой.

Возможно ли это? Как мне написать свой CSS?

li.shown {
    -webkit-animation: animateIn .8s forwards;
    -moz-animation: animateIn .8s forwards;
    animation: animateIn .8s forwards;
    -webkit-transition-delay: 0;
    -moz-transition-delay: 0;
    transition-delay: 0;
    -webkit-transition-delay: attr(data-animation-offset ms);
    -moz-transition-delay: attr(data-animation-offset ms);
    transition-delay: attr(data-animation-offset ms);
}

Мои списки могут выглядеть так, а тег данных вычисляется через js:

<li data-animation-offset="2000" class="shown"></li>

Конечно, самым простым решением является использование старого старого тега стиля, но самой крутой может быть версия css.

Заранее спасибо

Ответ 1

Да и нет. текущая версия стандартов делает разрешает это использование. В нем сначала говорится:

В CSS2.1 выражение attr() всегда возвращает строку. В CSS3, выражение attr() может возвращать много разных типов. Выражение attr() не может вернуть все, например, оно не может счетчики, названные строки, кавычки или значения ключевых слов, такие как "авто, 'Nowrap, или' базовый уровень. Это намеренно, поскольку цель Выражение 'attr() не позволяет описать форматирование презентационного языка с использованием CSS, но чтобы CSS учитывать семантические данные.

Правильный синтаксис теперь:

attr( <attr-name> <type-or-unit>? [ , <fallback> ]? )

И затем говорится:

Необязательный аргумент - это ключевое слово, взятое из списка ниже, который сообщает UA, как интерпретировать значение атрибута, и определяет тип выражения attr(). Если опустить, строка подразумеваемый.

Далее ниже мы читаем, что ms является допустимым значением типа или единицы, детализируя:

Значение атрибута должно анализироваться как токен NUMBER CSS и интерпретируется как измерение с указанным единицей. По умолчанию используется значение 0 в соответствующих единицах, или же минимальное значение свойства, если '0 в соответствующие единицы недействительны для этого имущества. Значение по умолчанию должно также можно использовать, если рассматриваемое свойство принимает только значения внутри определенный диапазон (например, положительные длины или углы от 0 до 90 градусов) и этот атрибут находится за пределами допустимого диапазона (например, отрицательная длина или 180deg). Если единица относительной длины, она должна быть вычислена до абсолютного длина.

Поэтому приведенный вами синтаксис является правильным и действительным в соответствии с этим документом. Документация Mozilla Developer Network также подтверждает, что это допустимое использование. Далее, чтобы подтвердить в нижней части страницы, что "Использование в других свойствах, кроме содержимого и с нестроковыми значениями" в настоящее время не поддерживается ни в одном браузере. Там CR для Gecko в настоящее время находится в статусе "NEW".

Так что да, это разрешено. Нет, он не работает ни в одном текущем браузере, ни в ближайшее время.

Следует также отметить, что текущая Рекомендация кандидата для CSS3 явно начинается со следующего примечания:

Следующие функции подвержены риску и могут быть сброшены в течение периода CR: 'calc(),' toggle(), 'attr().

Поэтому не гарантируется, что эта функция останется на уровне CSS 3, и как таковая, будет ли она вообще реализована.

Ответ 2

В настоящее время функция attr() CSS не может использоваться вне свойства content.

_MDN

Ответ 3

С одним только css я не думаю, что это возможно, что вы можете сделать, это как с циклом jquery через ваши элементы и выцветать.

Что-то вроде:

var timer=2000;
$('your li selector here').each(function(index){  
    setTimeout(function(){  
        $(this).fadeOut(200);  
    }, timer*index)  
});