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

【问题标题】：Using CSS attr() function and data-tags for animation timings使用 CSS attr() 函数和数据标签进行动画计时
【发布时间】：2014-10-19 19:55:57
【问题描述】：

我想知道是否可以将数据标签与 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 版本。

提前致谢

【问题讨论】：

可悲的是，我很确定这是不可能的。等待更多答案
是的...很确定你是唯一的动画属性而不是属性。
在支持 CSS attr() 功能的浏览器中，这应该可以正常工作。其他想法的人应该确保他们熟悉该功能:)
@NielsKeurentjes "在支持 CSS attr() 功能的浏览器中" ...如果当前是空集，这不是我的错 :)
@Pointy 你还是错了。所有浏览器目前都支持attr的CSS2.1规范，因为它只能用于字符串，不允许使用单位规范。没有浏览器支持允许使用的 CSS3 扩展。

标签： html css animation custom-data-attribute

【解决方案1】：

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

_MDN

【讨论】：

在“资源”选项卡中链接的所有相关浏览器问题的来源：caniuse.com/#feat=css3-attr。有些问题是 12 年前产生的！我不希望它永远得到解决。真可惜。

【解决方案2】：

是和不是。 current revision of the standards 确实允许这种用法。它首先指出：

在 CSS2.1 中，'attr()' 表达式总是返回一个字符串。在 CSS3，'attr()' 表达式可以返回许多不同的类型。这 ‘attr()’ 表达式不能返回所有内容，例如它不能做计数器、命名字符串、引号或关键字值，例如“auto”， “nowrap”或“基线”。这是故意的，因为 ‘attr()’ 表达式不是为了描述一个表示语言的格式使用 CSS，但要使 CSS 能够考虑语义数据。

现在正确的语法是：

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

然后说：

可选参数是从列表中提取的关键字下面告诉UA如何解释属性值，以及定义 attr() 表达式的类型。如果省略，“字符串”是暗示。

在下文中，我们了解到ms 是一个有效的type-or-unit 值，详细说明：

属性值必须解析为 NUMBER CSS 标记，并且是解释为具有指定单位的维度。默认值为“0” 在相关单位中，否则如果为“0”，则属性的最小值相关单位对该物业无效。默认必须如果所讨论的属性只接受一个范围内的值，也可以使用特定范围（例如，从 0 到 90 度的正长度或角度）和属性超出范围（例如，负长度或 180 度）。如果单位是相对长度，必须计算为绝对长度长度。

因此，根据本文档，您提供的语法是正确且有效的。 Mozilla Developer Network 文档也确认这是有效的用法。继续在页面底部确认 “在除内容之外的其他属性中使用且具有非字符串值” 目前在任何浏览器中不受支持。有一个 CR for Gecko 目前处于“新”状态。

所以是的，这是允许的。不，它不能在任何当前的浏览器中运行，也不会很快在任何地方运行。

还应注意，当前的Candidate Recommendation for CSS3 明确地以以下注释开头：

以下功能存在风险，可能会在 CR 期间被丢弃：“calc()”、“toggle()”、“attr()”。

因此不保证此功能将保留在 CSS 级别 3 中，因此不保证它是否会实现。

【讨论】：

【解决方案3】：

仅使用 css 我认为这是不可能的，您可以做的就像使用 jquery 循环遍历您的项目并淡化它们。

类似：

var timer=2000;
$('your li selector here').each(function(index){  
    setTimeout(function(){  
        $(this).fadeOut(200);  
    }, timer*index)  
});

【讨论】：