これはロングショットだと思いますが、尋ねる価値があります。多くのモバイル アプリ (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トランジションの有無にかかわらず、このような急速な変更をよりスムーズに適用するためのトリックを知っていますか?