2

我认为这是一个长镜头，但值得一问。我在许多移动应用程序（例如 Facebook）中都有类似于左侧菜单的东西，当您按下“打开”按钮时，它会顺利打开（在我的情况下，使用 CSS 转换），但我也实现了拖出功能，您可以从屏幕左侧滑动以将菜单拖出。在这种情况下，它是由 javascript 驱动的，并且对于 CSS 转换来说太快（似乎）不知道该做什么。它会变得混乱、口吃、倒退等。所以我只是在用户将菜单拖出时关闭了转换。这在 ti 非常流畅的 iOS 上效果很好，虽然 Android 和 Blackberry 都在尽力而为，但如果它可以更流畅就更好了。

这是我的打开/关闭菜单状态的 CSS

#view_wrap {
    position: absolute;
    top: 0px;
    right: -100%;
    left: 100%;
    bottom: 0px;
    -webkit-transition: all .2s 0s;
    -webkit-transform: translate(-100%);
    background-color: #fff;
}

#menu.open + #view_wrap {
    -webkit-transform: translate(-3.125em);
    box-shadow: 0px 0px .3125em rgba(0,0,0,.5);
    overflow: hidden;
}

#view_wrap.animating {
    -webkit-transition: none;
}

并且拖动功能只是改变translate每个值touchmove

你知道有什么技巧可以让如此快速的变化在有或没有 CSS 过渡的情况下更顺利地应用吗？

4

1 回答 1

1

我设法让它工作，不完全确定它会在你的情况下工作，但我有一个幻灯片，它通过下一步和后退按钮以及用手指拖动来水平滑动图像。

我的情况与您相似，因为按钮的滑动是由 3d 转换驱动的，在任何支持它的设备上都非常流畅，但是拖动是用平面旧的 javascript 完成的，而且经常结结巴巴。

我有比这更多的代码，但为了清楚起见，我只是提取了与转换有关的位。

在被拖动的元素上，我首先使用 jquery 在 touchstart 事件上添加了一个持续时间较短的过渡，100 毫秒似乎对我来说效果很好。

// inside the touchstart event
$('#my-element').on('touchstart', function(e) {
      $(this).css('transition','100ms');
});

在触发 touchmove 事件时，我之前正在计算左手位置并设置元素的左位置，我通过应用 3d 过渡并在用户移动手指时更新 X 坐标来替换它。注意：translate3d 在 iOS 设备上显然是“硬件加速”，而“翻译”不是，所以最好在 Y 和 Z 设置为 0 的情况下进行 3d 翻译。

// Inside the touchmove event, -10px will change as the user drags
$('#my-element').on('touchmove', function(e) {
   var newLeft = /** A calculation of the new left hand position **/
   $(this).css('transform','translate3d('+newLeft +'px,0px,0px);
});

最后，在 touchend 事件中，我删除了 CSS 过渡并将元素的左侧位置重新设置为正确的位置。

// Inside the touchend event
$('#my-element').on('touchend', function(e) {
   var endLeft = /** A calculation of the new left hand position **/
   $('#sliding-element').css('transition','');
   $('#sliding-element').css('transform','');
   $('#sliding-element').css('left', endLeft /** Whatever the new left hand position is **/);
});

希望这可以帮助

于 2013-07-25T10:01:11.900 回答