如何使用CSS轉換在屏幕上滑動div？

我的網頁上有兩個div，A和B. Div A是可見的，Div B是隱藏的。如何使用CSS轉換在屏幕上滑動div？

當用戶點擊div A中的鏈接時，我想將div A屏幕上的「滑動」（通過左邊緣離開），並在屏幕上滑動div B（通過右邊緣進入）。

我發現jQuery動畫在ipad上非常慢，所以我想用webkit CSS動畫代替，我相信它們是用硬件渲染的。我該怎麼做呢？

來源

2010-06-06 Colen

只是爲了堅持，它是CSS *轉換*或CSS動畫。 CSS變換是當您更改對象的形狀時。 – 2010-06-07 13:15:29

@ PaulD.Waite變換：translate（x，y）只是改變位置，而不是形狀。對？ – MdaG 2013-06-17 07:06:11

@MdaG：啊，是的，非常真實。 – 2013-06-17 07:47:42

以下示例顯示瞭如何使用webkit動畫進行此操作。您也可以閱讀本文以瞭解更多背景：http://webkit.org/blog/138/css-animation/

圓角只是表明頁面正在移出屏幕，而不僅僅是改變寬度。

主要想法是爲左CSS屬性設置動畫並使用容器div來進行裁剪。

<!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>

來源

2010-06-06 23:24:42 tstanis

你在這裏例[jsfiddle]（http://jsfiddle.net/onigetoc/bB5sK/「jsfiddle」）。 – Gino 2012-07-12 19:22:24

要關閉#left div「幻燈片」，您需要將其設置爲「left：0px;」最初：http://jsfiddle.net/7QWGj/ – Harmon 2014-02-18 00:23:12

如何使用CSS轉換在屏幕上滑動div？

回答

相關問題