Проверьте, не анимирован ли элемент CSS3

Есть ли способ проверить, анимирован ли элемент?

Но будучи анимированным не с анимацией jquery, но с переходом css3.

Проблема у меня есть... У меня есть этот слайдер, при нажатии стрелки я даю его

left = left+200

где left - либо

element.position().left

или

parseInt(element.css("left"));

(это не имеет большого значения, проблема возникает и с))

элемент анимируется с помощью

transition: left 400ms ease-in-out;

поэтому, когда пользователь нажимает на стрелку один раз, а затем снова до окончания анимации, слева возвращает значение в зависимости от его положения (так что вместо того, чтобы сказать.. 400 пикселей, он может вернуться 235.47px, так как он был нажат в середине анимация).

Ответы

Ответ 1

Когда вы изменяете свойство left элемента, вы можете связать с ним логическое значение (например, используя data()) и установите его на true, чтобы указать, что переход начался. Затем вы можете связать с событие завершения перехода (которое зависит от браузера) и установить логическое значение обратно false из вашего обработчика чтобы указать, что переход закончился.

Конечный результат:

yourElement.on(
    "transitionend MSTransitionEnd webkitTransitionEnd oTransitionEnd",
    function() {
        $(this).data("transitioning", false);  // Transition has ended.
    }
);

(Обратите внимание, что приведенный выше код должен запускаться только один раз.)

if (!yourElement.data("transitioning")) {
    // No transition active, compute new position.
    var theNewLeft = yourElement.position().left + 200;
    // Set new position, which will start a new transition.
    yourElement.data("transitioning", true).css("left", theNewLeft);
}