How do I use CSS transformations to slide a div on screen?
My web page has two divs on it, A and B. Div A is visible, Div 开发者_StackOverflow中文版B is hidden.
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).
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?
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/
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.
<!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>
加载中,请稍侯......
精彩评论