我想知道是否可以在 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 版本。
提前致谢
最佳答案
关于html - 使用 CSS attr() 函数和数据标签进行动画计时,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25506696/