Html 如何使用 CSS 转换在屏幕上滑动 div？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2985560/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I use CSS transformations to slide a div on screen?
提问by Colen
My web page has two divs on it, A and B. Div A is visible, Div B is hidden.
我的网页上有两个 div，A 和 B。Div A 可见，Div B 隐藏。
When the user clicks a link in div A, I want to "slide" div A off screen (leaving via the left edge), and slide div B on screen (entering via the right edge).
当用户单击 div A 中的链接时，我想将 div A“滑出”屏幕（通过左边缘离开），并在屏幕上滑动 div B（通过右边缘进入）。
I've found that jquery animations are very slow on the ipad, so I want to use the webkit CSS animations instead, which I believe are rendered in hardware. How do I do this?
我发现 ipad 上的 jquery 动画非常慢，所以我想改用 webkit CSS 动画，我相信它是在硬件中呈现的。我该怎么做呢？
回答by tstanis
Below is an example showing how to do this with webkit animations. You might also read this article for more background: http://webkit.org/blog/138/css-animation/
下面是一个示例，展示了如何使用 webkit 动画来做到这一点。您也可以阅读这篇文章以了解更多背景信息：http: //webkit.org/blog/138/css-animation/
The rounded corners are just to show that the page is moving off screen, not just changing width.
圆角只是为了表明页面正在移出屏幕，而不仅仅是改变宽度。
The main idea is to animate the left CSS property and use a container div to do clipping.
主要思想是为 left 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>
