使用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);
}

我的列表项可能如下所示,数据标签由js计算:

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

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

提前致谢

Answer 1

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

_MDN

Answer 2

是的,不是.该标准当前版本 确实允许这种用法.它首先说明:

在CSS2.1中,'attr()'表达式总是返回一个字符串.在CSS3中,'attr()'表达式可以返回许多不同的类型.'attr()'表达式不能返回所有内容,例如它不能执行计数器,命名字符串,引号或关键字值,例如'auto','nowrap'或'baseline'.这是故意的,因为'attr()'表达的意图不是要使用CSS来描述表示语言的格式,而是使CSS能够考虑语义数据.

现在正确的语法是:

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

然后陈述:

可选参数是从下面的列表中绘制的关键字,它告诉UA如何解释属性值,并定义attr()表达式的类型.如果省略,则隐含'string'.

在下面,我们读到这ms是一个有效的类型或单位值,详细说明:

属性值必须解析为NUMBER CSS标记,并被解释为具有指定单位的维度.相关单位的默认值为"0",如果相关单位中的"0"对该属性无效,则该属性的最小值.如果所讨论的属性仅接受特定范围内的值(例如正长度或0到90度的角度)且属性超出范围(例如负长度或180度),则还必须使用默认值.如果单位是相对长度,则必须将其计算为绝对长度.

因此,根据本文档,您提供的语法是正确且有效的.在Mozilla开发者网络的文件也证实,这是有效的使用.在页面底部继续确认任何浏览器当前不支持"在内容以外的其他属性中使用和使用非字符串值".Gecko的CR目前处于"新"状态.

是的,这是允许的.不,它在任何当前的浏览器中都不起作用,也不会在任何时候这样做.

还应该指出,目前的CSS3候选建议书明确从以下注释开始:

以下功能存在风险,可能会在CR期间被删除:'calc()','toggle()','attr()'.

因此,不能保证此功能将保留在CSS级别3中,因此是否将实现.