Kiểm tra xem phần tử có đang hoạt ảnh CSS3

Question

Có cách nào để kiểm tra xem phần tử có đang hoạt ảnh không?

Nhưng được hoạt hình không với Animate jquery, nhưng với quá trình chuyển đổi css3 của ..

Vấn đề tôi đã là ... Tôi có thanh trượt này, trên mũi tên nhấp tôi cho nó

left = left+200 

nơi trái là một trong hai

element.position().left 

hoặc

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

(nó không thực sự quan trọng, vấn đề xảy ra với một trong hai)

nguyên tố này đang được hoạt hình với

transition: left 400ms ease-in-out; 

như vậy, khi người dùng nhấp vào mũi tên một lần và sau đó một lần nữa trước khi kết thúc hoạt ảnh, giá trị trả về trái tùy thuộc vào vị trí của nó (thay vì nói .. 400px, nó có thể trả lại 235,47px kể từ khi được nhấp vào giữa hoạt ảnh) ..

Answer 1

Khi bạn thay đổi thuộc tính left của một phần tử , bạn có thể liên kết ab giá trị oolean với nó (sử dụng ví dụ data()) và đặt nó thành true để cho biết quá trình chuyển đổi đã bắt đầu. Sau đó, bạn có thể liên kết với transition end event (thay đổi tùy thuộc vào trình duyệt) và đặt giá trị boolean quay lại false từ trình xử lý của bạn để cho biết quá trình chuyển đổi đã kết thúc.

Kết quả cuối cùng là một cái gì đó như: (. Chú ý đoạn mã trên chỉ phải chạy một lần)

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