在CSS属性中使用nth-child的值是否有“纯CSS”方式(而不是Less / Sass)?像这样的东西:
span.anim:nth-child(N) { animation-delay: N * 0.5s; }
如果有,我该怎么办?如果没有,我怎么能以干净的方式模仿它? (我确定我在这里过于复杂了)
详细描述
我正在创建一个简单的动画,其中字母在旋转时淡入.为此,我使用了javascript(与jQuery)和CSS的组合,但这产生了一些问题(见下文);所以我试图转向仅限CSS的解决方案,并以大量规则结束.
这个(简化的)CSS对于两种解决方案都是通用的:
span.anim { font-size:30px; opacity:0; animation: anim 1s; animation-fill-mode: forwards; } @keyframes anim { from { transform: rotate(0deg); opacity:0; } to { transform: rotate(360deg); opacity:1; } }
使用JavaScript CSS
我的JavaScript代码如下所示:
var aux = $("#animate").text(); $("#animate").text(""); for (var x = 0; x < aux.length; x++) { setTimeout('$("#animate").append("<span class=\'anim\'>' + aux[x] + '</span>")',500 * x); }
这很好用……除非用户移动到另一个选项卡,否则动画会混乱,结果是意外的.你可以在这个JSfiddle:http://jsfiddle.net/e7b9ygk4/上看到它(运行脚本,移动到另一个选项卡,几秒钟后返回).
仅使用CSS
我可以通过破坏较小元素中的元素来实现相同的效果(这是我觉得我过于复杂的部分),然后将动画应用于具有不同延迟的每个元素:
span.anim:nth-child(1) { -webkit-animation-delay:0.5s; } span.anim:nth-child(2) { -webkit-animation-delay:1.0s; } span.anim:nth-child(3) { -webkit-animation-delay:1.5s; } span.anim:nth-child(4) { -webkit-animation-delay:2.0s; } span.anim:nth-child(5) { -webkit-animation-delay:2.5s; } span.anim:nth-child(6) { -webkit-animation-delay:3.0s; } span.anim:nth-child(7) { -webkit-animation-delay:3.5s; } span.anim:nth-child(8) { -webkit-animation-delay:4.0s; } span.anim:nth-child(9) { -webkit-animation-delay:4.5s; } span.anim:nth-child(10) { -webkit-animation-delay:5.0s; } span.anim:nth-child(11) { -webkit-animation-delay:5.5s; } span.anim:nth-child(12) { -webkit-animation-delay:6.0s; } span.anim:nth-child(13) { -webkit-animation-delay:6.5s; } span.anim:nth-child(14) { -webkit-animation-delay:7.0s; } span.anim:nth-child(15) { -webkit-animation-delay:7.5s; } span.anim:nth-child(16) { -webkit-animation-delay:8.0s; }
这很好用,即使用户移动到不同的选项卡,但它会导致许多不必要的代码(HTML和CSS,尽管可以使用JavaScript简化).你可以看到它正在使用这个JSfiddle:http://jsfiddle.net/f5my3sm1/.
我的直觉告诉我,这可以使用Sass / Less来实现,但我想知道是否有一种简单的“纯CSS”方式来做到这一点,可以用一条规则来实现(希望如此):
span.anim:nth-child(N) { animation-delay: N * 0.5s; }
解决方法
您可以将偏移量放在标记(或使用JS)的数据属性中,然后使用以下内容:
/* attr(name,units,fallback) */ span.anim {animation-delay: attr(offset,1) * 0.5s;}
<span class="anim" offset="0"></span> <span class="anim" offset="1"></span> <span class="anim" offset="2"></span> <span class="anim" offset="3"></span> <span class="anim" offset="4"></span>
请记住,这仍然是被广泛接受的方式,并且像我之前提到的那样,上面的语法当前不会起作用,因为它需要使用伪元素,如:after.
至少,这是一个有趣的事情.
原文地址:https://www.jb51.cc/css/214928.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。