使用 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 版本。
提前致谢
【问题讨论】:
可悲的是,我很确定这是不可能的。等待更多答案 是的...很确定你是唯一的动画属性而不是属性。 在支持 CSSattr()
功能的浏览器中,这应该可以正常工作。其他想法的人应该确保他们熟悉该功能:)
@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() 函数和数据标签进行动画计时的主要内容,如果未能解决你的问题,请参考以下文章