Документация для разработчиков
Темная тема

Анимация

Описание и методы

Класс BX.easing позволяет создавать анимацию на странице. Анимация в контексте веб-страницы - это изменение стиля DOM-элемента.

Перед использованием методов класса BX.easing необходимо подключить расширение core_fx.js.

CJSCore::Init(array("fx"));
МетодОписаниеС версии
BX.easingКонструктор.12.5
BX.easing.prototype.animateЗапускает анимацию.12.5
BX.easing.prototype.animateProgressРедко используемый метод. Запускает анимацию, но на каждой итерации вместо функции-обработчика step, вызывается функция-обработчик progress.12.5
BX.easing.prototype.stop(completed)Останавливает анимацию на текущем шаге. Если completed=true, то дополнительно выполнится функция-обработчик окончания анимации.12.5
Анимационные функцииФункции, которые позволяют делать различного вида плавные анимации.12.5

Пример использования

var banner = BX("my-banner");
var easing = new BX.easing({
	duration : 500,
	start : { height : 0, opacity : 0 },
	finish : { height : 100, opacity: 100 },
	transition : BX.easing.transitions.quart,
	step : function(state){
		banner.style.height = state.height + "px";
		banner.style.opacity = state.opacity/100;
	},
	complete : function() {
		banner.style.display = "none";
	}
});
easing.animate();


Пользовательские комментарии

Мы будем рады, если разработчики добавят свои комментарии по практическому использованию методов системы.

Для этого нужно всего лишь авторизоваться на сайте

Но помните, что Пользовательские комментарии, несмотря на модерацию, не являются официальной документацией. Ответственность за их использование несет сам пользователь.

Также Пользовательские комментарии не являются местом для обсуждения функционала. По подобным вопросам обращайтесь на форумы.
© «Битрикс», 2001-2024, «1С-Битрикс», 2024
Наверх