Làm cách nào để sử dụng các phép biến đổi CSS để trượt một div trên màn hình?

Trang web của tôi có hai div trên đó, A và B. Div A hiển thị, Div B bị ẩn.Làm cách nào để sử dụng các phép biến đổi CSS để trượt một div trên màn hình?

Khi người dùng nhấp vào liên kết trong div A, tôi muốn "trượt" div A màn hình tắt (rời qua cạnh trái) và trượt div B trên màn hình (nhập qua cạnh phải).

Tôi nhận thấy rằng hoạt ảnh jquery rất chậm trên ipad, vì vậy tôi muốn sử dụng hoạt ảnh CSS của webkit thay vào đó, điều tôi tin là được hiển thị bằng phần cứng. Làm thế nào để tôi làm điều này?

Nguồn

2010-06-06 Colen

Chỉ để có được sự ổn định, đó là CSS * chuyển tiếp * hoặc hoạt ảnh CSS. Chuyển đổi CSS là khi bạn thay đổi hình dạng của đối tượng. –

@ PaulD.Waite biến đổi: dịch (x, y) chỉ là thay đổi vị trí, không phải hình dạng. Đúng? – MdaG

@MdaG: ah vâng, rất đúng. –

Dưới đây là ví dụ cho thấy cách thực hiện điều này với hoạt ảnh webkit. Bạn cũng có thể đọc bài viết này để biết thêm về nền: http://webkit.org/blog/138/css-animation/

Các góc tròn chỉ để cho biết trang đang di chuyển khỏi màn hình, không chỉ thay đổi chiều rộng.

Ý tưởng chính là tạo hiệu ứng cho thuộc tính CSS bên trái và sử dụng div vùng chứa để cắt bớt.

<!DOCTYPE html> 
<html> 
<head> 
<style> 
div { 
    width: 50px; 
    height: 50px; 
    -webkit-border-radius: 15px; 
} 

#left { 
    position: absolute; 
    background-color: blue; 
    -webkit-transition: left 1s ease-in; 
} 

#right { 
    position: absolute; 
    left: 50px; 
    background-color: green; 
    -webkit-transition: left 1s ease-in; 
} 

#left.animate { 
    left: -50px; 
} 

#right.animate { 
    left: 0px; 
} 

#container { 
    position: relative; 
    overflow:hidden; 
} 
</style> 
<script> 

function animate() { 
    document.getElementById('left').className = 'animate'; 
    document.getElementById('right').className = 'animate'; 
} 
</script> 
</head> 
<body> 
<div id='container'><div id='left'></div><div id='right'></div></div> 
<input type='button' onclick='animate();' value='Animate!'></input> 
</body> 
</html>

Nguồn

2010-06-06 23:24:42 tstanis

ví dụ của bạn ở đây với [jsfiddle] (http://jsfiddle.net/onigetoc/bB5sK/ "jsfiddle"). – Gino

Để tắt #left div "slide", bạn cần đặt "left: 0px;" ban đầu: http://jsfiddle.net/7QWGj/ – Harmon

Làm cách nào để sử dụng các phép biến đổi CSS để trượt một div trên màn hình?

Trả lời

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