Question

我认为这是一个长镜头，但值得一提。我在许多移动应用程序（例如Facebook）中有类似于左侧菜单的东西，当你按下“打开”按钮时，它会顺利打开（在我的情况下，使用CSS过渡），但我也实现了拖出功能，您可以从屏幕左侧滑动以拖出菜单。在这种情况下，它是由javascript驱动的，并且过于快速（看似）CSS转换知道该怎么做。它变得混乱，口吃，倒退等等。所以我只是在用户拖动菜单时关闭转换。这在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过渡的情况下更顺利地应用这些快速变化？

Answer 1

我设法让这个工作，不完全确定它会在你的情况下工作，但我有一个幻灯片放映，水平滑动图像通过下一个＆amp;后退按钮并用手指拖动。

我遇到了类似的情况，因为按钮的滑动是由3D过渡驱动的，因此在支持它的任何设备上都非常流畅，但拖动只需要使用平面旧的javascript并且结果很多。

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

在被拖动的元素上，我开始使用jquery在touchstart事件上添加一个持续时间较短的转换，100ms对我来说似乎很有效。

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

当touchmove事件被触发时，我之前在进行计算以计算出左手位置并设置元素的左侧位置，我通过应用3d过渡并在用户移动时更新X坐标来替换它他们的手指。注意：translate3d显然是iOS设备上的'硬件加速'，其中'translate'不是那么它更好地用Y＆amp; Z设为0。

// 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 **/);
});

希望这有帮助

使用CSS过渡消除快速javascript驱动的位置变化？

1 个答案: