小编Kai*_*ier的帖子

我想知道我是否可以将数据标签与CSS中的动画结合起来.我有一个由javascript模板引擎呈现的未定义数量的项目列表.一旦JS完成呈现它们,我想一个接一个地淡化它们而不必编写大量的CSS选择器.这是我最初的想法,当时我只有大约6个元素被动态添加.由于它可能会得到一个未定义的数量,但仍然应该看起来很好,我面临着所描述的问题.

这可能吗？我如何编写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版本.

提前致谢