如何使用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？

回答

相关问题