如何使用CSS转换在屏幕上滑动div？

Question

如何使用CSS转换在屏幕上滑动div？

Col*_*len 8 css safari html5 webkit ipad

我的网页上有两个div,A和B.Div A可见,Div B隐藏.

当用户点击div A中的链接时,我想在屏幕上"滑动"div A(通过左边缘离开),并在屏幕上滑动div B(通过右边缘进入).

我发现ipad上的jquery动画非常慢,所以我想使用webkit CSS动画,我认为它是用硬件渲染的.我该怎么做呢？

Answer 1

小智 9

下面是一个示例,说明如何使用webkit动画执行此操作.您还可以阅读本文以获取更多背景信息:http://webkit.org/blog/138/css-animation/

圆角只是为了显示页面在屏幕外移动,而不仅仅是改变宽度.

主要思想是为左侧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>

Run Code Online (Sandbox Code Playgroud)

你的例子是[jsfiddle](http://jsfiddle.net/onigetoc/bB5sK/"jsfiddle"). (7认同)

归档时间：	15 年，4 月前
查看次数：	22136 次
最近记录：	15 年，4 月前