【问题标题】：How to slide up / slide down an element with Zepto on mobile devices?如何在移动设备上使用 Zepto 向上/向下滑动元素？
【发布时间】：2012-08-02 02:55:15
【问题描述】：

一种常见的移动 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;
}

【问题讨论】：

标签： android iphone cordova css-transitions zepto

【解决方案1】：

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

将活动类添加到#action-sheet 将在 2 秒内将其向下滑动 200 像素

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

【讨论】：