CSS3-транзишены — чертовски полезная штука. По сравнению с javascript-анимацией они:
- Обеспечивают более плавные переходы;
- Потребляют меньше ресурсов;
- Открывают новые возможности. Например, автоматическую обработку матричных преобразований (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"
});
Заключение
Подробнее о транзишенах можно прочитать здесь
Буду благодарен за фидбек по плагину.
Автор: alevkon
