views:

374

answers:

1

Hi,

My web page has two divs on it, A and B. Div A is visible, Div 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?

+3  A: 

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>
tstanis