html - 使用 CSS attr() 函数和数据标签进行动画计时

Question

我想知道是否可以在 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);
}

我的listitems可能是这样的，数据标签是js计算的:

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

当然，最简单的解决方案是使用良好的旧样式标签，但最酷的可能是 css 版本。

提前致谢

Answer 1

目前 attr() CSS 函数不能在 content 属性之外使用。

<子> MDN