CSS3 переходы с использованием Javascript Fallback - PullRequest
Новая
       50

CSS3 переходы с использованием Javascript Fallback

11 голосов
/ 04 ноября 2010

Существует ли инфраструктура javascript, которая будет использовать переходы CSS3 для таких эффектов, как изменение непрозрачности или перемещение элементов, но обратится к использованию javascript setInterval / setTimeout, если он не поддерживается?

Ответы [ 6 ]

3 голосов
/ 06 апреля 2011

Выезд Статья Адди Османи . Это хорошее резюме текущих решений с jQuery, а именно:

3 голосов
/ 13 января 2011

Проверьте модуль перехода YUI 3, он делает именно это.

2 голосов
/ 04 ноября 2010

Вы можете посмотреть, используя http://www.modernizr.com/

1 голос
/ 09 декабря 2011

Один из моих коллег написал микробиблиотеку, предлагающую ограниченный откат 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);
};

Может быть, этого может быть достаточно или хорошая база для достижения того, что вы ищете?

Bye,

David

0 голосов
/ 15 октября 2011

к сожалению, ни одна из этих альтернатив, похоже, не позволяет вам использовать ослабления, такие как отскок.

Моя попытка использовать animate-extended переместила элемент на дюйм, а затем просто удалила его.Я действительно хотел бы сохранить отскок вместо просто кубического или линейного ослабления.

0 голосов
/ 13 сентября 2011

Подводя итог, есть несколько плагинов для больших фреймворков (см. Другие ответы):

Другие фреймворки уже используют CSS-переходы, где это возможно:

Есть ли микробиблиотеки?

...