CSS3 Transitions with Javascript Fallback

后端 未结 6 2204
隐瞒了意图╮
隐瞒了意图╮ 2021-02-14 04:13

Is there a javascript framework out there that will use CSS3 Transitions for effects like changing opacity or moving elements but will fall back to using javascript setInterval/

6条回答
  •  南笙
    南笙 (楼主)
    2021-02-14 04:33

    One of my colleagues has written a micro library offering a limited JS fallback to Transitions: 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);
    };
    

    Maybe it could be enough or a good base to achieve what's you're looking for?

    Bye,

    David

提交回复
热议问题