Hoạt ảnh CSS3, dịch sang vị trí

Question

Tôi có một div mà tôi nhấp vào để kéo nó. Một khi nó nằm trên một khu vực, nó sinh động đến vị thế của mình qua:

$("#wheel1").animate({left: "200px", top: "100px"}); 

tôi cũng có thể làm cho nó sinh động với:

@-webkit-keyframes wheel1 { 
    0% { 
    } 
    100% { 
     -webkit-transform: translate(200px, 100px); 
    } 
} 

Sự khác biệt là; với jQuery nó hoạt hình đến 200px từ bên trái của tài liệu. Với CSS3, nó hoạt hình 200px từ nơi bạn thả nó (mà là xấu)

Có cách nào để làm cho CSS3 hoạt hình từ trên cùng bên trái của tài liệu, như jQuery không? Tôi đã thử thay đổi nguồn gốc biến đổi và một vài cài đặt khác mà không có may mắn.

Answer 1

Tôi không phải là chuyên gia về chuyển đổi CSS3, nhưng tôi nghĩ rằng translate liên quan đến vị trí ban đầu của phần tử.

Một cách tôi có thể thấy để đạt được những gì bạn muốn với CSS sẽ là định vị phần tử hoàn toàn và sử dụng CSS3 transition để thay đổi thuộc tính left và top.

Đây là một Fiddle: http://jsfiddle.net/nSa9s/2/

HTML:

<div class="box"></div> 

CSS:

.box { 
    position: absolute; 
    background: #ff0000; 
    left: 400px; 
    top: 200px; 
    width: 100px; 
    height: 100px; 
    -webkit-transition: all 1.0s linear; 
    -moz-transition: all 1.0s linear; 
    -o-transition: all 1.0s linear; 
    -ms-transition: all 1.0s linear;  
    transition: all 1.0s linear; 
} 
.box.move { 
    left: 200px; 
    top: 100px; 
} 

jQuery:

$(document).ready(function() { 
    $('.box').on('click', function() { 
     $(this).addClass('move'); 
    }); 
}); 

Mục đích của JS là thêm move lớp vào phần tử khi nó được nhấp.

Answer 2

Hãy sửa tôi nếu tôi sai, nhưng lý do tại sao bạn muốn sử dụng hoạt ảnh CSS3 là vì hoạt ảnh jQuery không thực hiện những hoạt ảnh CSS3 có thể làm gì?

Nếu tôi chính xác, hãy xem plugin jQuery có tên .transit cho phép bạn áp dụng tất cả các hoạt ảnh CSS3 cho bất kỳ bộ chọn nào theo cách được áp dụng ở định dạng CSS3, nhưng được thực hiện thông qua các phương pháp lập trình jQuery.

Plugin đó xử lý các yêu cầu trượt và chuyển động CSS3 của rất nhiều và mọi hoạt ảnh CSS3 khác mà bạn có thể ném vào đó. Liên kết trên có các ví dụ trên trang.

Nếu điều này không muốn bạn muốn, hãy nhận ra CSS không thể "phát hiện" khi đối tượng bị "thả" vào phần tử khác. Có kích hoạt giả :hover giả, nhưng điều đó sẽ kích hoạt mỗi lần cho dù là gì.

Answer 3

FYI, để làm điều này với hoạt ảnh CSS (không chuyển tiếp như các câu trả lời đã chọn), bạn chỉ cần sử dụng left trong khung hình chính thay vì dịch.

@-webkit-keyframes wheel1 { 
    0% {} 
    100% { 
     left:200px; top: 100px; 
    } 
}