css 动画 巧用伪元素

css 动画 巧用伪元素

A while back I posted an interesting tidbit from Daniel Buchner which allows developers to detect DOM node insertions with JavaScript and CSS animations; an awesome trick driven by CSS animations.  Lea Verou recently posted another detection snippet driven by CSS animations:  detecting pseudo-element animation support.  Here's how she did it!

不久前我发表了Daniel Buchner的有趣的趣闻，它使开发人员可以用JavaScript和CSS动画检测DOM节点的插入 ; 由CSS动画驱动的出色技巧。 Lea Verou最近发布了由CSS动画驱动的另一个检测代码段 ：检测伪元素动画支持。 这是她的做法！

View Demo 观看演示

CSS (The CSS)

The test case can use any pseudo-element; in this case we'll use :before:

测试用例可以使用任何伪元素。 在这种情况下，我们将使用:before ：

/** * Animation on pseudo-elements test */ @keyframes color { from,to { color: rgb(0, 255, 0); } } .testElement:before { content: '(...testing animation support...)'; color: rgb(255, 0, 0); animation: color 1s infinite; -webkit-animation: color 1s infinite; }

A simple color animation is assigned to the pseudo-element and a spot-check of generated content will tell you if animation is supported (green) or not (red).  At the time of this post, only Firefox and Chrome support animation of psuedo-elements.

将一个简单的彩色动画分配给该伪元素，并对生成的内容进行抽查会告诉您是否支持动画(绿色)(不支持)(红色)。 在撰写本文时，仅Firefox和Chrome支持psuedo元素的动画。

JavaScript检测 (JavaScript Detection)

Thanks to a tip from Ahmed El Gabri, I can present a method to detect pseudo-element animation:

感谢Ahmed El Gabri的技巧，我可以提出一种检测伪元素动画的方法：

var color = window.getComputedStyle( document.querySelector('.testElement'), ':before' ).getPropertyValue('color') if(color == 'rgb(0, 255, 0)') { // Supported! :) }

The same principal applies; if the color is green, the animation worked. A JavaScript method of feature detection makes everything better!

相同的原则适用； 如果颜色是绿色，则动画起作用。 JavaScript的特征检测方法使一切变得更好！

View Demo 观看演示

Unfortunately there doesn't appear to be a JavaScript method for testing generated content properties, so a spot check appears to be all we can rely on at this point.  Hopefully someone clever out there can figure out an efficient way to get the test result! Having a reliable method for detecting pseudo-element animation is excellent; another tool to add to the arsenal!

不幸的是，似乎没有JavaScript方法可以测试生成的内容属性，因此，这时我们只能依靠抽查。 希望有人聪明可以找到一种有效的方法来获得测试结果！ 具有可靠的伪元素动画检测方法非常出色； 另一个添加到武器库的工具！

翻译自: https://davidwalsh.name/pseudo-element-animation

css 动画 巧用伪元素

相关资源：css3 transitions和伪元素制作4种超酷鼠标经过hover动