如何在移动设备上使用Zepto向上/向下滑动元素？

Question

常见的移动UI模式是向上/向下滑动，例如向上滑动操作表，然后在不在视图中时将其向下滑动到屏幕下方。

我尝试了各种css 3过渡和Zepto的动画功能，但尚未在Android和iPhone上找到能够顺畅且一致地工作的东西。

我认为这篇文章可以作为一个明确的问题和答案：

如何在Android和iPhone浏览器上（以及通过扩展PhoneGap）顺利上滑/下滑？

这是一个开始：

#action-sheet {
  background-color: #333;
  height: 200px; /* note that the height changes depending
                   on # of action divs added to the action picker,
                   dynamically from Javascript */
  width: 250px;
  position: fixed;
  bottom: -50%; /* something that will get it off the screen */
  left: 50%;
  margin-left: -125px;
  /* maybe some css3 transition here? */
}
#action-sheet.active {
   bottom: 0px;
}

Answer 1

iOS和Android浏览器使用webkit渲染引擎，其中3d变换是硬件加速的，因此这就是您想要使用的内容。你应该使用translate3d。

将活动类添加到＃action-sheet将在2秒内将其向下滑动200px

#action-sheet {
  -webkit-transition: -webkit-transform 2s;
}
#action-sheet.active {
  -webkit-transform: translate3d(0,200px,0);
}