如何使用CSS转换在屏幕上滑动div？
我的网页上有两个Div，A和B。Div A是可见的，Div B是隐藏的 当用户单击分区a中的链接时，我想将分区a滑出屏幕（通过左边缘离开），并将分区B滑入屏幕（通过右边缘进入）如何使用CSS转换在屏幕上滑动div？,css,ipad,safari,html,webkit,Css,Ipad,Safari,Html,Webkit,我的网页上有两个Div，A和B。Div A是可见的，Div B是隐藏的 当用户单击分区a中的链接时，我想将分区a滑出屏幕（通过左边缘离开），并将分区B滑入屏幕（通过右边缘进入） 我发现jquery动画在ipad上非常慢，所以我想使用webkit CSS动画，我相信这些动画是在硬件中呈现的。如何执行此操作？下面的示例演示了如何使用webkit动画执行此操作。您还可以阅读本文了解更多背景信息： 圆角只是为了显示页面正在离开屏幕，而不仅仅是改变宽度 其主要思想是设置左侧CSS属性的动画，并使用容器di
我发现jquery动画在ipad上非常慢，所以我想使用webkit CSS动画，我相信这些动画是在硬件中呈现的。如何执行此操作？下面的示例演示了如何使用webkit动画执行此操作。您还可以阅读本文了解更多背景信息： 圆角只是为了显示页面正在离开屏幕，而不仅仅是改变宽度 其主要思想是设置左侧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>
div{
宽度：50px；
高度：50px；
-webkit边界半径：15px；
}
#左{
位置：绝对位置；
背景颜色：蓝色；
-webkit过渡：左1秒进入；
}
#对{
位置：绝对位置；
左：50px；
背景颜色：绿色；
-webkit过渡：左1秒进入；
}
#左图：动画{
左：-50px；
}
#对，制作动画{
左：0px；
}
#容器{
位置：相对位置；
溢出：隐藏；
}
函数animate（）{
document.getElementById（'left'）。className='animate'；
document.getElementById（'right'）。className='animate'；
}