用CSS转换平滑快速的JavaScript驱动的位置更改？

我认为这是一个远射，但值得提问。我在许多移动应用程序（例如Facebook）中有类似于左侧菜单的东西，当您按下“打开”按钮时，它可以顺利打开（在我的情况下，使用CSS转换），但我也实现了拖出功能，您可以从屏幕左侧轻扫以拖出菜单。在这种情况下，它是由JavaScript驱动的，并且对于CSS转换知道该怎么做太快（看起来）。它变得困惑，口吃，倒退等等。所以我只是在用户将菜单拖出时关闭转换。这在iOS非常流畅的iOS平台上运行良好，而Android和Blackberry都尽力而为，如果能够更流畅，这将非常棒。用CSS转换平滑快速的JavaScript驱动的位置更改？

这里是我的打开/关闭菜单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过渡的情况下更顺畅地应用？

来源

2013-05-09 bearfriend

您可以加入一个[的jsfiddle（http://jsfiddle.net）演示？ – 2013-05-09 23:38:22

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

我和你处于类似的情况，因为按钮的滑动是由3d转换支持的，所以在任何支持它的设备上都非常流畅，但拖动只用平面旧的javascript完成，而且结实了很多。

我有更多的代码比这个，但只是提取的位清理转换。

在被拖动的元素上，我开始通过使用jquery在touchstart事件上添加一个持续时间很短的转换，100ms似乎很适合我。

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

虽然的TouchMove事件被烧制，其中I先前在做计算，以计算出的左手位置和设置元件的左侧位置，我通过施加3d过渡和更新的X坐标替换该当用户移动他们的手指时。注：translate3d显然是iOS上的“硬件加速”图谋其中“翻译”也不是那么其更好地做一个3D为Y翻译&设置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 **/); 
});

希望这有助于

来源

2013-07-25 10:01:11 3urdoch

除非使用jQuery，否则这正是我在自己想到的方法，我认为伟大的思想和愚蠢。 – pushplaybang 2016-02-12 07:44:49

用CSS转换平滑快速的JavaScript驱动的位置更改？

回答

相关问题