- PVSM.RU - https://www.pvsm.ru -
CSS3-транзишены — чертовски полезная штука. По сравнению с javascript-анимацией они:
Конечно, наш с вами любимый IE их не поддерживает даже в 9 версии.
Логичным выходом было бы в случае IE выполнять анимацию традиционным способом, например через $.animate. Предлагаю в таких случаях использовать плагин Smooth.js [1], который сделает это за вас.
Синтаксис предельно прост и максимально приближен к 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"
});
Подробнее о транзишенах можно прочитать здесь [2]
Буду благодарен за фидбек по плагину.
Автор: alevkon
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/javascript/14445
Ссылки в тексте:
[1] Smooth.js: https://github.com/alevkon/smooth/wiki
[2] здесь: http://www.w3schools.com/css3/css3_transitions.asp
Нажмите здесь для печати.