CSS3 - Hoạt hóa thuộc tính lề trái qua JavaScript

Question

Xem xét proof of concept này, bạn có thể tạo hiệu ứng lề trái (cả giá trị âm và dương) thông qua JavaScript không? .. Và bạn sẽ làm như thế nào?

Lưu ý: Tôi biết đây là chỉ WebKit. Và tôi ổn với điều đó, khi tôi đang phát triển cho iOS Safari.


Cập nhật

Cảm ơn câu trả lời, nhưng chức năng Animate jQuery không hỗ trợ hình ảnh động CSS tinh khiết, đó là những gì tôi cần.

Answer 1

Tôi biết rằng bạn đặc biệt nói "bạn có thể làm điều này trong JavaScript" hay không, nhưng bạn không cần sử dụng JavaScript. Tôi khá chắc chắn rằng bằng chứng về khái niệm bạn liên kết để chỉ sử dụng jQuery như một cách để làm cho các hình ảnh động rơi trở lại JavaScript để tất cả các trình duyệt chơi tốt đẹp với các hình ảnh động. Vì bạn đang phát triển riêng cho Mobile Safari, bạn không cần phải sử dụng jQuery cho điều này ngoại trừ sử dụng một plugin lịch sử để đẩy và bật các trạng thái để làm cho nút quay lại của trình duyệt hoạt động; điều này hoàn toàn có thể thực hiện được thông qua các thuộc tính chuyển tiếp CSS và bộ chọn giả :target.

Vì vậy, như một sự thay thế, bạn sẽ có thể làm điều gì đó như thế này:

Trong HTML:

<div id="thing-that-will-transition"> 
    <a href="#thing-that-will-transition>click this to transition the div</a> 
</div> 

Trong CSS:

#thing-that-will-transition 
{ 
    (bunch of properties) 
    -webkit-transition: margin-left [the rest of your transition values] 
} 

#thing-that-will-transition:target 
{ 
    margin-left: [your properties] 
} 

Chừng trận URL mảnh của bạn với tên của phần tử mà bạn muốn chuyển đổi thì bạn nên có thể đẩy đoạn vào URL bằng JavaScript nếu bạn abs olutely phải thay vì sử dụng neo với một fragment href trong khi vẫn đang có quá trình chuyển đổi diễn ra. Và nếu bạn sử dụng một plugin lịch sử jQuery hoặc tự đẩy và popping của ngăn xếp lịch sử thì bạn vẫn nhận được hành vi nút quay lại cho ứng dụng của mình.

Tôi biết bạn đã yêu cầu cụ thể một giải pháp JavaScript để kích hoạt hoạt ảnh CSS, nhưng tôi không chắc tại sao đây là những gì bạn cần. Xin lỗi nếu điều này không giúp bạn gì cả.


CẬP NHẬT: Here's a jsFiddle demonstrating the above. Nó sử dụng plugin lịch sử jQuery this để quản lý ngăn xếp lịch sử, do đó bạn vẫn có thể nhận được hành vi nút quay lại/chuyển tiếp có thể chấp nhận được từ URL của đoạn.Thẻ anchor sử dụng phương thức "push" hoặc "load" của plugin trong onClick của nó với một đoạn tiêu chuẩn trong thuộc tính href làm dự phòng cho các trình duyệt mà không bật JS.


CẬP NHẬT 2:Here's another jsFiddle sử dụng chuyển đổi/bản dịch thay vì chuyển tiếp.


CẬP NHẬT 3 (bởi roosteronacid):

Và như để nhận được hình ảnh động đi qua JavaScript, bạn có thể làm:

var element = document.getElementById("..."); 

setTimeout(function() 
{ 
    element.style.webkitTransitionDuration = "0.3s"; 
    element.style.webkitTransitionTimingFunction = "ease-out"; 
    element.style.webkitTransform = "translate3d(300px, 0, 0)"; 
}, 0); 

Answer 2

bạn có thể sử dụng jqueries .animate()-

Kiểm tra ví dụ của tôi - http://jsfiddle.net/ajthomascouk/jS83H/ - Nhấn + và -

Answer 3

lề Animating css với jQuery làm việc như thế này:

$('#mydiv').animate({ 

    'margin-left': 'new margin value' 

}); 

Answer 4

Để sử dụng css webkit của hình động, bạn sẽ tạo một lớp có thuộc tính biến đổi, sau đó bạn có thể sử dụng jQuery để thêm/xóa lớp đã nói khi cần.

Answer 5

Chuyển đổi sử dụng tốt hơn, hầu như được hỗ trợ đa trình duyệt (ngoại trừ IE) và đặt khung hình chính thông qua JS.

Answer 6

Bạn có thể thiết lập một sự chuyển tiếp trong css3, và sau đó tiếp theo thay đổi thành phần tử sẽ được làm động.

.MY_CLASS { 
    -moz-transition: all 0.3s ease-out; /* FF4+ */ 
    -o-transition: all 0.3s ease-out; /* Opera 10.5+ */ 
    -webkit-transition: all 0.3s ease-out; /* Saf3.2+, Chrome */ 
    -ms-transition: all 0.3s ease-out; /* IE10 */ 
    transition: all 0.3s ease-out; 
} 

này quy định một gần trình duyệt chéo (chết tiệt IE) chuyển tiếp áp dụng cho tất cả các thay đổi css, kéo dài 0,3 giây và giúp giảm bớt, vì vậy nó sẽ làm chậm về phía cuối của quá trình chuyển đổi. Vì vậy, để animate nó sang trái/phải, chỉ cần thay đổi css:

$(".MY_CLASS").css("margin-left", "-300px"); 

Chú giải này sẽ animate nó vào một vị trí cố định của 300px, nếu bạn muốn để animate vào một vị trí tương đối để sử dụng vị trí hiện tại của nó:

var mleft = $(".MY_CLASS").css("margin-left"); 
var newleft = mleft.substr(0, mleft.length-2) + 50; 
$('.MY_CLASS').css("margin-left", newleft+"px"); 

See a working example here (jsFiddle)

Answer 7

này hoạt động sử dụng CSS, HTML và chỉ WebKit:

#wrapper { 
    width: 700px; 
    text-align: left; 
    border-radius:10px; 
    -moz-border-radius:10px; 
    border-style:solid; 
    border-width:1px; 
    border-color:#ccc; 
    padding:30px 30px; 
    -moz-box-shadow: 0px 0px 5px #BBB; 
    -webkit-box-shadow: 0px 0px 5px #BBB; 
    box-shadow: 0px 0px 5px #BBB; 

    -webkit-transition-property: -webkit-transform, margin-left; 
    -webkit-transition-duration: 3s; 
    -webkit-transition-timing-function: ease-in; 
    -webkit-transform: translate(100px); 
} 

Chỉ cần tạo <div id="wrapper">Placeholder text</div> trong tệp HTML để kiểm tra. Làm việc cho tôi trong Google Chrome 12.0.742.112 và Safari 5.0.5 (6533.21.1). Nếu nó không thực hiện hoạt ảnh ngay lập tức, có thể do trình duyệt của bạn xử lý bản dịch quá nhanh (hoặc bộ nhớ đệm, có lẽ?). Bạn có thể xem xét thêm một sự chậm trễ bằng cách nào đó. Tôi chỉ cần bấm nút làm mới một vài lần thực sự nhanh chóng. Đã làm cho tôi.

Chỉnh sửa: Kiểm tra nguồn đằng sau trang kiểm tra girliemac's. Một số thứ sâu sắc ở đó. Xem thêm điều này SO post.