用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驅動的位置更改？

回答

相關問題