我認爲這是一個遠射,但值得提問。我在許多移動應用程序(例如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過渡的情況下更順暢地應用?
您可以加入一個[的jsfiddle(http://jsfiddle.net)演示? – 2013-05-09 23:38:22