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

Question

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

Но анимируется не с помощью анимированного jquery, но с переходом css3 ..

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

left = left+200

, где слева либо

element.position().left

или

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

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

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

transition: left 400ms ease-in-out;

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

Answer 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);
}