Question

是否有一个javascript框架会使用CSS3 Transitions来改变不透明度或移动元素等效果但如果不支持则会回退到使用javascript setInterval / setTimeout？

Answer 1

查看YUI 3 Transition模块，它就是这样。

Answer 2

结帐Addy Osmani's article。它是jQuery当前解决方案的一个很好的总结，特别是：

jquery.transition.js
jQuery.animate-enhanced.js

Answer 3

您可以使用http://www.modernizr.com/

查看

Answer 4

我的一位同事编写了一个微型库，为过渡提供了有限的JS后备：http://blogs.msdn.com/b/eternalcoding/archive/2011/12/06/css3-transitions.aspx

TRANSITIONSHELPER.computeCubicBezierCurveInterpolation = function (t, x1, y1, x2, y2) {
    // Extract X (which is equal to time here)
    var f0 = 1 - 3 * x2 + 3 * x1;
    var f1 = 3 * x2 - 6 * x1;
    var f2 = 3 * x1;

    var refinedT = t;
    for (var i = 0; i < 5; i++) {
        var refinedT2 = refinedT * refinedT;
        var refinedT3 = refinedT2 * refinedT;

        var x = f0 * refinedT3 + f1 * refinedT2 + f2 * refinedT;
        var slope = 1.0 / (3.0 * f0 * refinedT2 + 2.0 * f1 * refinedT + f2);
        refinedT -= (x - t) * slope;
        refinedT = Math.min(1, Math.max(0, refinedT));
    }

    // Resolve cubic bezier for the given x
    return 3 * Math.pow(1 - refinedT, 2) * refinedT * y1 +
            3 * (1 - refinedT) * Math.pow(refinedT, 2) * y2 +
            Math.pow(refinedT, 3);
};

也许它足以或是一个很好的基础来实现你正在寻找的东西？

再见，

大卫

Answer 5

总结一下，大框架有一些插件（参见其他答案）：

jQuery（jquery.transition.js和jquery.animate-enhanced.js）
MooTools

其他框架在可能的情况下已经使用了CSS转换：

YUI
rightjs

有没有微型图书馆？

Answer 6

遗憾的是，这些替代方案似乎都不允许你使用缓冲，例如反弹。

我尝试使用animate-enhanced将元素移动了一英寸，然后将其删除。我真的想保持弹跳，而不仅仅是立方或线性缓和。

使用Javascript后退的CSS3过渡

6 个答案: