通过CSS3过渡检测属性是否可动画?

时间:2011-01-13 10:59:11

标签: javascript animation css3 transform transition

可以使用CSS3过渡动画的属性列表在浏览器中不一致,并且可能会随新浏览器版本而变化。例如,-moz-transform在FF3.6中不能使用-moz-transition进行动画处理,但它在FF4中。

那么,有没有办法在JavaScript中检测特定属性是否可动画?我不想使用用户代理嗅探,因为它不可靠。

提前致谢!

2 个答案:

答案 0 :(得分:9)

是的,有办法。演示如下,解释如下。有一些非常重要的警告,所以请务必继续阅读。

以下代码将测试浏览器是否可以在两个值之间设置动画。

代码

jsFiddle demo

/*
@param property  The property to test.
@param from      A valid starting value for the animation.
@param to        A valid ending value for the animation.
@param [element] The element to test with. (Required for testing
                 properties with prerequisites, e.g. "top" requires
                 non-static position.)
*/
function isAnimationSupported(property, from, to, element) {
    var doc = document.documentElement,
        style = doc.appendChild(document.createElement("style")),
        rule = [
                'capTest{',
                    '0%{',   property, ':', from, '}',
                    '100%{', property, ':', to,   '}',
                '}'
               ].join(''),
        propCamel = property.toCamelCase(),
        prefixes = 'moz ms o webkit '.split(' '), // Unprefixed last, see comments.
        prefixCount = prefixes.length,
        canAnimate = false;

    element = doc.appendChild((element)
            ? element.cloneNode(false)
            : document.createElement('div'));

    // Detect invalid start value. (Webkit tries to use default.)
    element.style[propCamel] = to;

    // Iterate through supported prefixes.
    for (var i = 0; i < prefixCount; i++) {

        // Variations on current prefix.
        var prefix  = prefixes[i],
            hPrefix = (prefix) ? '-' + prefix + '-' : '',
            uPrefix = (prefix) ? prefix.toUpperCase() + '_' : '';

        // Test for support.
        if (CSSRule[uPrefix + 'KEYFRAMES_RULE']) {

            // Rule supported; add keyframe rule to test stylesheet.
            style.sheet.insertRule('@'+ hPrefix + 'keyframes ' + rule, 0);

            // Apply animation.
            var animationProp = (hPrefix + 'animation').toCamelCase();
            element.style[animationProp] = 'capTest 1s 0s both';

            // Get initial computed style.
            var before = getComputedStyle(element)[propCamel];

            // Skip to last frame of animation.
            // BUG: Firefox doesn't support reverse or update node style while
            // attached.
            doc.removeChild(element);
            element.style[animationProp] = 'capTest 1s -1s alternate both';
            doc.appendChild(element);
            // BUG: Webkit doesn't update style when animation skipped ahead.
            element.style[animationProp] = 'capTest 1s 0 reverse both';

            // Get final computed style.
            var after = getComputedStyle(element)[propCamel];

            // If before and after are different, property and values are animable.
            canAnimate = before !== after;
            break;
        }
    }

    // Clean up the test elements.
    doc.removeChild(element);
    doc.removeChild(style);

    return canAnimate;
}

// Cribbed from Lea Verou's prefixfree.
String.prototype.toCamelCase = function() {
    return this.replace(/-([a-z])/g, function($0, $1) { return $1.toUpperCase(); })
               .replace('-','');
};

如何使用

对此的强制性参数是动画属性以及应该采用的起始值和结束值。或者,您可以传递一个具有其他初始样式集的元素,例如position: absolute。 (该函数克隆元素,因此您可以从文档中传递节点,它们不会被更改。)如果您没有传递任何元素,则动画将在div上以UA的任何默认样式进行测试适用。

工作原理

将关键帧动画规则添加到虚拟样式表,初始框架设置为from值,最终框架设置为to值。此动画应用于元素。然后,我们检查动画属性的计算样式,以查看动画从初始帧开始与从最终帧开始时是否不同。

这样做的原因是因为过渡和关键帧动画的可动画属性是相同的,并且如果属性支持动画,浏览器将仅应用关键帧值。

警告(在使用之前阅读,其中一些是令人讨厌的!)

浏览器处理动画的方式有几点不一致。其中一些我已经尽可能地以未来的方式解决了这个问题;然而,其中一些是难以处理的。

最值得注意的是,Firefox在静态元素上补间位置值(例如left),而其他元素(例如Webkit和Opera)则没有。它实际上并不移动元素,但更新了该属性的值。因此,如果您尝试在不传递非静态定位元素的情况下设置位置值的动画,则浏览器之间会得到不同的结果。

支持CSS过渡的主流浏览器的最新版本也支持CSS关键帧,尽管一些旧版本支持前者但不支持后者。 (例如歌剧11。)

最后,如果我更优雅地这样做,我会使用prefixfree来确定直接使用的正确前缀;目前我测试了一系列前缀,从未加前缀的版本开始。

答案 1 :(得分:3)

编辑:有关检测可动画属性的优秀技术,请参阅Jordan's answer

我担心没有直接的方法可以检测房产是否具有动画效果。但是,属性在大多数情况下是一致的(我遇到的唯一问题是FF4过渡+文本阴影+变换)。

http://www.w3.org/TR/css3-transitions/#the-transition-property-property-#properties-from-css-

Firefox 3.6不支持css转换,您可以使用诸如Modernizr之类的js库来检测它:

http://www.modernizr.com/