Smooth.js — jQuery-плагин для CSS3-transitions с даунгрейдом до $.animate

    CSS3-транзишены — чертовски полезная штука. По сравнению с javascript-анимацией они:
    1. Обеспечивают более плавные переходы;
    2. Потребляют меньше ресурсов;
    3. Открывают новые возможности. Например, автоматическую обработку матричных преобразований (CSS-transforms);

    Конечно, наш с вами любимый IE их не поддерживает даже в 9 версии.

    Логичным выходом было бы в случае IE выполнять анимацию традиционным способом, например через $.animate. Предлагаю в таких случаях использовать плагин Smooth.js, который сделает это за вас.

    Синтаксис


    Синтаксис предельно прост и максимально приближен к jQuery.animate:

    $("#subject).smooth({
        width: "40px",
        transform: "rotate(-45deg)",
        background: "#cbf"
    }, {
        duration: 2000,
        easing: "swing"
    });
    


    Первый параметр — список свойств для анимации, второй — настройки анимации. В настройках пока только duration (длительность в мс) и easing(имя сглаживающей функции).

    Последовательная анимация


    Функция возвращает объект $.Deferred(), так что вы легко сможете выполнить несколько анимаций последовательно:
    $("#subject).smooth({
        width: "40px"
    }).done(function() {
        $("#subject).smooth({
            transform: "rotate(-45deg)",
        ));
    


    Режимы работы


    Плагин может работать в одном из двух режимов — «css» и 'jquery". При инициализации пытается установить режим в css, в случае использования ie — в «jquery». Режим можно установить вручную в любой момент:

        $.fn.smooth.configure({
            mode: "jquery"
        });
    


    Заключение


    Подробнее о транзишенах можно прочитать здесь
    Буду благодарен за фидбек по плагину.

    Similar posts

    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More
    Ads

    Comments 14

      +3
      А демо?
        0
        Сорри, демка только на гитхабе :(
        Я обычно такими вещами не занимаюсь, поэтому не нашлось хостинга, куда можно по-быстрому выложить.
      0
      jsfiddle.net/epFvH/1/
      Что я делаю не так, что у меня в Chrome 21 и FF 15 не происходит анимации?
        0
        Сорри, jsfiddle как-то влияет
        Если отлаживать там код, видно, что свойство transition почему-то элементу не присваивается.
        При этом, если скачать пример и запустить локально, все работает.
        Разбираюсь…
        +1
        jsfiddle.net/Yeah/xngSD/

        Ваш код из примера (слегка переделанный под jsfiddle)
        В CSS режиме анимации как таковой нет — просто применяется transition. То есть fade, к примеру, нифига не плавный по сравнению с animate. ЧЯДНТ?
        Да, и reset не отменяет Scew, кстати…
          0
          Ещё есть jquery.animate-enhanced plugin. Позволяет прокачать основные анимации без особых затрат на уже готовом проекте.
            +1
            Пользуюсь jQuery Transit, и вроде бы он малость превосходит данный плагин. Если нет, то прошу перечислить преимущества.

            На счет ссылки на w3schools, этот ресурс не самое лучшее место для приобретения знаний. За объяснениями сюда.
              0
              Про который, кстати, на хабре уже было.
              +4
              Леш, есть такая штука как github pages.
              Сделал форк и вуаля: syabro.github.com/smooth/
                0
                Спасибо, Макс!
                Чертовски в тему)
                +1
                Для детектинга окончания CSS анимации советую воспользоваться встроенным в браузеры обработчиком.

                В Opera не работает, по крайней мере syabro.github.com/smooth/ из комментария
                  0
                  В IE, кстати, есть HTML+TIME: www.w3.org/TR/NOTE-HTMLplusTIME

                  Можно его использовать.

                  Only users with full accounts can post comments. Log in, please.