检测是否存在@keyframes规则而不迭代所有样式表？

Question

有没有办法检测是否存在具有特定名称的CSS3动画，没有迭代所有CSS规则？

可以是使用JS库或普通JS的解决方案。没关系。

Answer 1

你可以：

1. 创建虚拟元素。
2. 将animationstart事件绑定到此虚拟​​元素。
3. 设置.style.animationName（使用适当的供应商前缀）。
4. 在文档中插入元素，查看事件是否在几毫秒内触发。

如果未触发事件，则假定动画不存在。不要忘记清理元素（即将其从DOM中删除）。

按设计，此方法是异步的。它比迭代所有样式表更可靠，因为如果在不同来源的样式表中声明动画，则后一种方法会失败。

实施例

function animationExists(animationName, callback) {
    var dummy = document.createElement('dummy');
    var done = function(result) {
        if (dummy.parentNode) {
            dummy.parentNode.removeChild(dummy);
            callback(result);
        }
    };
    var onanimstart = function() {
        done(true);
    };
    // Animations won't be triggered until the tab is visible:
    var requestAnimationFrame = window.requestAnimationFrame ||
                                window.mozRequestAnimationFrame ||
                                window.webkitRequestAnimationFrame;
    requestAnimationFrame(function() {
        done(false);
    });
    if (typeof dummy.style.animationName != 'undefined') {
        dummy.style.animationName = animationName;
        dummy.style.animationDuration = '0.001s';
        dummy.addEventListener('animationstart', onanimstart);
    } else {
        dummy.style.webkitAnimationName = animationName;
        dummy.style.webkitAnimationDuration = '0.001s';
        dummy.addEventListener('webkitAnimationStart', onanimstart);
    }
    (document.body || document.documentElement).appendChild(dummy);
}

上一个功能正确检测动画是否存在于：

• Firefox 16+（如果您希望支持FF 5 - 15，请添加moz - 前缀分支）。
• Chrome 10 +
• Opera 12.1 +
• Safari 6.0（如果您想支持Safari 4 - 5.1，请为requestAnimationFrame添加polyfill）
• IE 10 +

演示：http://jsfiddle.net/7mjSd/（显示两个警告框）。