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

Posted

技术标签:

【中文标题】使用 CSS attr() 函数和数据标签进行动画计时【英文标题】:Using CSS attr() function and data-tags for animation timings 【发布时间】: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 扩展。 【参考方案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)  
);

【讨论】:

以上是关于使用 CSS attr() 函数和数据标签进行动画计时的主要内容,如果未能解决你的问题,请参考以下文章

css3 新属性

jquery的animate怎么获取动画的CSS属性呢?

HTML5和CSS3五CSS3二

HTML5和CSS3五CSS3二

HTML5和CSS3五CSS3二

css属性标签选择器