我的网页上有两个div,A和B。DivA是可见的,Div B是隐藏的。
当用户单击div A中的链接时,我要在屏幕外“滑动” div A(通过左侧边缘离开),并在屏幕上滑动div B(通过右侧边缘进入)。
我发现ipad上的jquery动画非常慢,所以我想改用webkit CSS动画,我相信这些动画是在硬件中渲染的。我该怎么做呢?
最佳答案
以下示例显示了如何使用Webkit动画执行此操作。您可能还需要阅读这篇文章以获得更多背景信息:http://webkit.org/blog/138/css-animation/
圆 Angular 仅表示页面正在移出屏幕,而不仅仅是更改宽度。
主要思想是为左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>
关于css - 如何使用CSS转换在屏幕上滑动div?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/2985560/