Введение в переходы CSS3

• Chrome & Safari: webkitTransitionEnd
• Firefox: mozTransitionEnd
• Опера: oTransitionEnd
• Internet Explorer: MSTransitionEnd

Событие предоставит вам следующую информацию:

• propertyName : имя анимированного свойства
• elapsedTime : время выполнения перехода в секундах.

Вот пример использования для IE10:

    block.addEventListener("MSTransitionEnd", onTransitionEvent);

Подробнее о переходах CSS3

В основном я могу предложить две причины, по которым переходы CSS3 действительно полезны:

• Аппаратное ускорение: переходы CSS3 напрямую обрабатываются на графическом процессоре (если он доступен) и дают более плавные результаты. И это действительно важно на мобильных устройствах, где вычислительная мощность действительно ограничена
• Лучшее разделение между кодом и дизайном : для меня разработчик не должен знать об анимации или чем-либо, связанном с дизайном. Точно так же дизайнер / художник не должен знать о JavaScript. Вот почему CSS3 Transitions действительно интересны, так как дизайнеры могут описывать все переходы в CSS без необходимости разработчиков

Поддержка и запасной вариант

Поскольку PP3, IE10 (который вы можете скачать с Windows 8 Developer Preview здесь ) поддерживает переходы CSS3:

Этот отчет был создан с помощью http://caniuse.com/#search=CSS3 переходов .

Конечно, поскольку спецификация не закончена ( рабочий проект ), вы должны использовать префиксы поставщика, такие как -ms-, -moz-, -webkit-, -o-.

Очевидно, мы видим, что нам необходимо предоставить прозрачное решение для всех типов браузеров. Наилучшим способом будет разработка API, который сможет определять поддержку переходов CSS3. Если браузер не поддерживает эту функцию, мы вернемся к некоторому коду JavaScript.

Важно поддерживать запасной метод, если вы полагаетесь на переходы для функциональности веб-сайтов. Если вы не хотите этого делать, вам следует рассмотреть возможность использования переходов только для улучшения дизайна . В этом случае сайт все еще будет работать, но только поддерживаемые браузеры будут работать в полном объеме. Мы говорим здесь о « прогрессивных улучшениях », поскольку чем мощнее браузер, тем больше возможностей он получает.

Переходы без переходов CSS3

Таким образом, чтобы иметь возможность поддерживать откат к переходам CSS3, мы разработаем небольшой инструментарий для обеспечения переходов по коду.

Прежде всего, мы создадим объект контейнера для нашего пространства имен:

    var TRANSITIONSHELPER = TRANSITIONSHELPER || {};
     
    TRANSITIONSHELPER.tickIntervalID = 0;
     
    TRANSITIONSHELPER.easingFunctions = {
        linear:0,
        ease:1,
        easein:2,
        easeout:3,
        easeinout:4,
        custom:5
    };
     
    TRANSITIONSHELPER.currentTransitions = [];

Чтобы поддерживать одинаковый уровень функций замедления, мы должны объявить «enum» со всеми обязательными полями.

Инструментарий основан на функции, которая вызывается каждые 17 мс (для достижения анимации при 60 кадрах в секунду). Функция будет перечислять через коллекцию активных переходов. Для каждого перехода код будет оценивать следующее значение с учетом текущего значения и целевого значения.

Нам понадобятся некоторые удобные функции для извлечения значений используемых свойств и единиц:

    TRANSITIONSHELPER.extractValue = function (string) {
        try {
            var result = parseFloat(string);
     
            if (isNaN(result)) {
                return 0;
            }
     
            return result;
        } catch (e) {
            return 0;
        }
    };
     
    TRANSITIONSHELPER.extractUnit = function (string) {
     
        // if value is empty we assume that it is px
        if (string == "") {
            return "px";
        }
     
        var value = TRANSITIONSHELPER.extractValue(string);
        var unit = string.replace(value, "");
     
        return unit;
    };

Основная функция обработает активные переходы и вызовет функцию кубического Безье для оценки текущих значений:

    TRANSITIONSHELPER.tick = function () {
        // Processing transitions
        for (var index = 0; index < TRANSITIONSHELPER.currentTransitions.length; index++) {
            var transition = TRANSITIONSHELPER.currentTransitions[index];
     
            // compute new value
            var currentDate = (new Date).getTime();
            var diff = currentDate - transition.startDate;
     
            var step = diff / transition.duration;
            var offset = 1;
     
            // Timing function
            switch (transition.ease) {
                case TRANSITIONSHELPER.easingFunctions.linear:
                    offset = TRANSITIONSHELPER.computeCubicBezierCurveInterpolation(step, 0, 0, 1.0, 1.0);
                    break;
                case TRANSITIONSHELPER.easingFunctions.ease:
                    offset = TRANSITIONSHELPER.computeCubicBezierCurveInterpolation(step, 0.25, 0.1, 0.25, 1.0);
                    break;
                case TRANSITIONSHELPER.easingFunctions.easein:
                    offset = TRANSITIONSHELPER.computeCubicBezierCurveInterpolation(step, 0.42, 0, 1.0, 1.0);
                    break;
                case TRANSITIONSHELPER.easingFunctions.easeout:
                    offset = TRANSITIONSHELPER.computeCubicBezierCurveInterpolation(step, 0, 0, 0.58, 1.0);
                    break;
                case TRANSITIONSHELPER.easingFunctions.easeinout:
                    offset = TRANSITIONSHELPER.computeCubicBezierCurveInterpolation(step, 0.42, 0, 0.58, 1.0);
                    break;
                case TRANSITIONSHELPER.easingFunctions.custom:
                    offset = TRANSITIONSHELPER.computeCubicBezierCurveInterpolation(step, transition.customEaseP1X, transition.customEaseP1Y, transition.customEaseP2X, transition.customEaseP2Y);
                    break;
            }
     
            offset *= (transition.finalValue - transition.originalValue);
     
            var unit = TRANSITIONSHELPER.extractUnit(transition.target.style[transition.property]);
            var currentValue = transition.originalValue + offset;
     
            transition.currentDate = currentDate;
     
            // Dead transition?
            if (currentDate >= transition.startDate + transition.duration) {
                currentValue = transition.finalValue; // Clamping
                TRANSITIONSHELPER.currentTransitions.splice(index, 1); // Removing transition
                index--;
     
                // Completion event
                if (transition.onCompletion) {
                    transition.onCompletion({propertyName:transition.property, elapsedTime:transition.duration});
                }
            }
     
            // Affect it
            transition.target.style[transition.property] = currentValue + unit;
        }
    };

Текущая версия инструментария поддерживает только числовые значения, но если вы хотите анимировать сложные значения (например, цвет), вам просто нужно разложить их на простые значения.

Регистрация перехода в системе будет осуществляться с использованием следующего кода:

    TRANSITIONSHELPER.transition = function (target, property, newValue, duration, ease, customEaseP1X, customEaseP1Y, customEaseP2X, customEaseP2Y, onCompletion) {
     
        // Create a new transition
        var transition = {
            target: target,
            property: property,
            finalValue: newValue,
            originalValue: TRANSITIONSHELPER.extractValue(target.style[property]),
            duration: duration,
            startDate: (new Date).getTime(),
            currentDate: (new Date).getTime(),
            ease:ease,
            customEaseP1X:customEaseP1X,
            customEaseP2X:customEaseP2X,
            customEaseP1Y: customEaseP1Y,
            customEaseP2Y: customEaseP2Y,
            onCompletion: onCompletion
        };
     
        // Launching the tick service if required
        if (TRANSITIONSHELPER.tickIntervalID == 0) {
            TRANSITIONSHELPER.tickIntervalID = setInterval(TRANSITIONSHELPER.tick, 17);
        }
        
        // Remove previous transitions on same property and target
        for (var index = 0; index < TRANSITIONSHELPER.currentTransitions.length; index++) {
            var temp = TRANSITIONSHELPER.currentTransitions[index];
     
            if (temp.target === transition.target && temp.property === transition.property) {
                TRANSITIONSHELPER.currentTransitions.splice(index, 1);
                index--;
            }
        }
     
        // Register
        if (transition.originalValue != transition.finalValue) {
            TRANSITIONSHELPER.currentTransitions.push(transition);
        }
    };

Функция « галочка » запускается при активации первого перехода.

Наконец, вам просто нужно использовать modernizr, чтобы определить, поддерживается ли переходы CSS3 текущим браузером. Если нет, то вы можете Откат к нашему инструментарию. 

Код для TransitionsHelper можно скачать здесь: http://www.catuhe.com/msdn/transitions/transitionshelper.js 

Например, в моей игре-головоломке для анимации ячеек используется следующий код:

    if (!PUZZLE.isTransitionsSupported) {
        TRANSITIONSHELPER.transition(block.div, "top", block.x * totalSize + offset, 500, TRANSITIONSHELPER.easingFunctions.ease);
        TRANSITIONSHELPER.transition(block.div, "left", block.y * totalSize + offset, 500, TRANSITIONSHELPER.easingFunctions.ease);
    }
    else {
        block.div.style.top = (block.x * totalSize + offset) + "px";
        block.div.style.left = (block.y * totalSize + offset) + "px";
    }

Мы можем заметить, что я мог бы использовать другой способ для анимации моих ячеек, когда поддерживаются переходы CSS3: я мог бы определить коллекцию классов CSS3 с предопределенными левым и верхним значениями (по одному для каждой ячейки), чтобы воздействовать на них для правых ячеек.

Некоторые платформы и наборы инструментов уже существуют для поддержки программных переходов:

• jQuery.transition.js : http://louisremi.github.com/jquery.transition.js/test/index.html
• jQUery-Animate-Enhanced: https://github.com/benbarnett/jQuery-Animate-Enhanced

Кстати, вы также можете использовать старый добрый метод animate () jQuery.

Вывод

Как мы уже видели, CSS3 Transitions — это действительно простой способ добавить анимацию в ваш проект. Вы можете создать более реактивное приложение, просто используя некоторые переходы, когда вы хотите изменить значения.

Кстати, есть два решения, если вы хотите реализовать запасной вариант JavaScript:

• Вы можете делать все на стороне JavaScript, и если вы обнаружите поддержку переходов CSS3, вы добавите объявления CSS3 на страницу.
• Или вы можете использовать стандартный способ (используя настоящие объявления CSS3 в файлах CSS) и просто обнаружить необходимость возврата в JavaScript. Для меня это лучший вариант, поскольку запасной вариант должен быть вариантом, а не основным предметом. В ближайшем будущем все браузеры будут поддерживать переходы CSS3, и в этом случае вам просто нужно будет удалить запасной код. Кроме того, это лучший способ оставить весь CSS под контролем творческой группы, а не в части кода.

Идти дальше

• Блог о анимации CSS3 Дэвида Руссе: http://blogs.msdn.com/b/davrous/archive/2011/12/06/introduction-to-css3-animations.aspx
• Спецификации переходов CSS3: http://www.w3.org/TR/css3-transitions/
• IE Test Drive на переходах CSS3: http://ie.microsoft.com/testdrive/Graphics/hands-on-css3/hands-on_transitions.htm
• Другие полезные посты:
• http://addyosmani.com/blog/css3transitions-jquery/
• http://css3.bradshawenterprises.com/
• http://webdesignerwall.com/trends/47-amazing-css3-animation-demos