Làm cách nào tôi có thể tạo lại zoom/pan phần tử jQuery .animate() bằng cách sử dụng biến đổi css?

Question

tôi đã đặt cùng một jsFiddle để minh họa cho câu hỏi của tôi:

http://jsfiddle.net/VbCcA/3/

Tôi có một chức năng mà sẽ quay và thu phóng đến một yếu tố cụ thể. Điều này được sử dụng để tạo ra quá trình chuyển đổi giữa các khung trong truyện tranh.

Tôi có tiền phạt này khi sử dụng jQuery's .animate(), nhưng tôi muốn sử dụng các phép biến đổi css khi có sẵn khi chúng hoạt động tốt hơn đáng kể trên các trình duyệt hiện đại.

Tuy nhiên tôi dường như không thể tạo lại chính xác cùng một hành vi.

Thay vì mô tả nó kém ở đây, nếu bạn nhìn vào jsFiddle bạn sẽ thấy hai bộ điều khiển, với mỗi nút tương ứng với một khung trong 'truyện tranh'. các điều khiển animate jQuery hoạt động chính xác và các điều khiển chuyển đổi css thì không.

Sự cố dường như giảm xuống khi đo các thuộc tính offset() khi phần tử đã được chia tỷ lệ bằng cách sử dụng biến đổi css.

Mọi trợ giúp sẽ được đánh giá cao.

LƯU Ý: Bạn sẽ cần phải 'chạy lại' jsFiddle khi chuyển đổi phương thức từ .animate sang biến đổi và ngược lại, để đặt lại CSS được sửa đổi khi chức năng chạy.

EDIT: Tôi vừa sửa liên kết tới jSfiddle ... Xin lỗi những người đã xem nó. Liên kết gốc bị thiếu một phần của mã ví dụ. Cũng chỉ để làm rõ, tôi cần sử dụng các giá trị dựa trên phần trăm vì toàn bộ ứng dụng hoàn toàn đáp ứng.

Answer 1

Đây chắc chắn không phải là tuyến đường trực tiếp nhất, nhưng hãy cân nhắc áp dụng jQuery Transit (http://ricostacruz.com/jquery.transit/) vào phiên bản .animate của bạn để xem cách xử lý chuyển đổi sang chuyển đổi CSS3. Sau đó, bạn có thể làm việc ngược từ đó.