如何在移动设备上使用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。

将活动类添加到#动作表将在2秒内将其向下滑动200像素

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