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动画驱动的另一个检测代码段 :检测伪元素动画支持。 这是她的做法!
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的特征检测方法使一切变得更好!
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方法可以测试生成的内容属性,因此,这时我们只能依靠抽查。 希望有人聪明可以找到一种有效的方法来获得测试结果! 具有可靠的伪元素动画检测方法非常出色; 另一个添加到武器库的工具!
css 动画 巧用伪元素