android - 如何在移动设备上使用 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);
}