Этот интересный плагин создает вид того будто один DOM-элемент преобразовывается/трансформируется в другой DOM-элемент и не важно в каком месте находят эти элементы.

Происходит это все с помощью клонирования элементов, т.е. сначала берется первый элемент(элемент из которого будет начинаться преобразование), клонируется, затем анимируется и преобразовывается в конечный элемент.

Запуск плагина:

1
2
3
4
5
6
7
<div id='a' style='background-color: red; font-size: 4em; padding: 1em;'>a</div>
<div id='b' style='background-color: blue; font-size: 4em; padding: 1em;'>b</div>

<script src='ramjet.js'></script>
<script>
    ramjet.transform( a, b );
</script>

Настройки:

Настроек для анимации и трансформации не так уж и много, но их достаточно чтобы сделать привлекательные эффекты. Одна из настроек это easing — сам эффект анимации, по умолчанию доступны только несколько стандартных эффектов, для использования других easing эффектов нужно подключить например эту библиотеку: https://www.npmjs.com/package/eases

Пример кода с дополнительными настройками:

1
2
3
4
5
6
var eases = require('eases'); //подключаем новые эффекты анимации

ramjet.transform(a, b, {
  easing: eases.elasticOut,
  duration: 800
});

Описание настроек:

ПараметрПо умолчаниюОписание параметра
aначальный DOM-элемент
bконечный DOM-элемент
Дополнительные настройки
donefunctionФункция обратного вызова которая сработает по завершению перехода.
duration400Период перехода в миллисекундах.
easingФункция анимации, рекомендуется использовать библиотеку указанную выше в статье. Доступные стандартные функции: ramjet.linear, ramjet.easeIn, ramjet.easeOut, ramjet.easeInOut
useTimerfalseПо умолчанию используется CSS анимация где это возможно и по возможности использования браузерами CSS. В старых браузерах будет использоваться анимация через таймеры (requestAnimationFrame или setTimeout). Если хотите постоянно использовать таймеры(что не рекомендуется), тогда укажите в этом параметре true.

Вспомогательные настройки:

ПараметрПо умолчаниюОписание параметра
1
ramjet.hide( a );
Устанавливает DOM-элементу прозрачность 0, т.е. скрывает его
1
ramjet.show( a );
Устанавливает DOM-элементу прозрачность 1, т.е. показывает его

Возможно вас это заинтересует
comments powered by HyperComments