Мне интересно, я могу комбинировать теги данных с анимациями в 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.
Заранее спасибо