2012-10-17 39 views
15

Tôi muốn dừng quá trình chuyển đổi đang diễn ra.Cách dừng chuyển tiếp CSS3

Tôi đã tìm thấy một vài tài liệu tham khảo [1] [2] nằm rải rác trên internet nhưng tôi dường như không thể ghép chúng lại với nhau.

Dưới đây là một fiddle của đề nghị đầu tiên (Với jQuery và CSS Transit cho ngữ cảnh): http://jsfiddle.net/thomseddon/gLjuH/

Cảm ơn

[1] https://twitter.com/evilhackerdude/status/20466821462

[2] github.com/madrobby/zepto/ vấn đề/508

+0

kiểm tra điều này có thể giúp http://stackoverflow.com/questions/5312289/interrupting-stop-a-css3-transition-on-the-actual-position-state – Afshin

+0

Cảm ơn, cũng nên liên kết với nó –

+0

Got nó: http://jsfiddle.net/thomseddon/gLjuH/3/ –

Trả lời

9

Vì vậy, tôi figured it out: http://jsfiddle.net/thomseddon/gLjuH/3/

Bí quyết là để thiết lập EAC Bạn có thể lưu trữ tất cả các thuộc tính trong một đối tượng trong phần tử với $ (this) .data (đạo cụ); và lặp lại chúng).

Khi bạn đã đặt rõ ràng thuộc tính, bạn có thể chạy hoạt ảnh 0 để ghi đè hoạt ảnh trước đó và tạm dừng hiệu ứng phần tử.

+3

Cảm ơn jsfiddle. Tôi đã làm một số refactoring và đã phá vỡ nó xuống các khái niệm cốt lõi ở đây: http://jsfiddle.net/jedhunsaker/gLjuH/13/ – jedmao

+0

@mrjedmao - liên kết fiddle là chết: ( – Danield

+1

@ Xin lỗi, tôi đã thay đổi tên của mình gần đây bây giờ là http://jsfiddle.net/jedmao/gLjuH/13/ – jedmao

1

Có một giải pháp đơn giản hơn nhiều. Nếu bạn muốn dừng việc chuyển đổi (và không dừng lại). Chỉ cần đặt css thành kiểu được tính toán hiện tại. Ví dụ: trong giải pháp cuộn tùy chỉnh, trong đó phần trên cùng là thuộc tính được chuyển đổi.

element.style.top=getComputedStyle(element).top; 

và thế là xong.

Các vấn đề liên quan