Kích hoạt hoạt ảnh CSS3 Webkit bằng cách sử dụng Javascript

Question

Tôi đang tìm cách sử dụng Webkit CSS3 để di chuyển DIV được định vị hoàn toàn từ vị trí này sang vị trí khác trên màn hình khi nhấn nút bằng cách thay đổi thuộc tính CSS trái và phải của nó. Tuy nhiên, tất cả các ví dụ để làm điều này mà tôi thấy sử dụng một quy tắc CSS tĩnh để áp dụng quá trình chuyển đổi này.

Tôi không biết vị trí mới trước khi bàn tay, vậy làm cách nào để áp dụng chuyển tiếp CSS3 động này?

Answer 1

Khi bạn đã xác định quá trình chuyển đổi, nó sẽ áp dụng cho dù bạn thay đổi giá trị CSS trên phần tử như thế nào. Vì vậy, bạn chỉ có thể áp dụng kiểu nội tuyến với JavaScript và phần tử sẽ hoạt ảnh. Vì vậy, với CSS như thế này:

left: 100px; 
top: 100px; 
-webkit-transition: top 300ms ease-in 100ms, left 200ms ease-in 50ms; 
-moz-transition: top 300ms ease-in 100ms, left 200ms ease-in 50ms; 
-o-transition: top 300ms ease-in 100ms, left 200ms ease-in 50ms; 
transition: top 300ms ease-in 100ms, left 200ms ease-in 50ms; 

Có một chức năng như thế này:

function clickme() { 
    var el = document.getElementById('mydiv'); 
    var left = 300; 
    var top = 200; 
    el.setAttribute("style","left: " + left + "px; top: " + top + "px;"); 
} 

Và bạn sẽ thấy những hình ảnh động khi bạn gọi hàm. Bạn có thể nhận được các giá trị cho bên trái và trên cùng từ nơi bạn muốn. I've done a full example.

Answer 2

Một lựa chọn khác là sử dụng jQuery Transit để di chuyển div trái hoàn toàn vị trí hoặc sang phải:

Javascript:

$("#btnMoveRight").click(function() { 
    $('#element').transition({ left: '+=50px' }); 
}); 

$("#btnMoveLeft").click(function() { 
    $('#element').transition({ left: '-=50px' }); 
}); 

JS Fiddle Demo

Nó hoạt động tốt trên các thiết bị di động và xử lý của bạn Tính tương thích của CSS3/trình duyệt cho bạn.