Pull to refresh

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

Reading time 1 min
Views 18K
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"
    });


Заключение


Подробнее о транзишенах можно прочитать здесь
Буду благодарен за фидбек по плагину.
Tags:
Hubs:
+23
Comments 14
Comments Comments 14

Articles