0

Zepto animate と CSS3 トランジションを使用して、div を左にアニメーション化し、ボタンのクリックで再び元に戻す実験を行っています。このために、 margin-right:-0; のスタイリングでクラスを追加および削除する toggleClass を使用しています。

すべてが機能していますが、ボタンをクリックしてクラスを切り替えると、モバイル デバイスで非常にわずかな遅延が発生します。animate を使用して遅延なく動作させましたが、CSS3 トランジションはハードウェアで高速化されているため、アニメーションを少しスムーズにしたいと考えていました。

基本的に、ボタンをクリックしてアニメーションを切り替えると、起動する前に非常にわずかな一時停止が発生します。これを取り除きたいです。

コードは以下のとおりです。このわずかな遅延が発生する理由を誰か知っていますか? 私の推測では、クラスを切り替える速度とそのスタイルを読み取る速度に関係していると思いますか?

どんな助け/洞察も大歓迎です!

#side-menu {
    float: right;
    height: 100%;
    width: 80%;
    overflow: scroll;
    margin-right:-1024px;
    box-shadow: 4px 0 5px #484848 inset;
    -webkit-box-shadow: 4px 0 5px #484848 inset;
    -moz-box-shadow: 4px 0 5px #484848 inset;
    background: linear-gradient(#444444, #333333) repeat scroll 0 0 #595858;
    background: -webkit-linear-gradient(#444444, #333333) repeat scroll 0 0 #595858;
    background: -moz-linear-gradient(#444444, #333333) repeat scroll 0 0 #595858;
    background: -o-linear-gradient(#444444, #333333) repeat scroll 0 0 #595858;
    -webkit-transition: margin-right 1s ease-in-out;
    -webkit-transform: translate3d(0, 0, 0);
    -webkit-transform: translateZ(0);
}

.sideMenuToggle{margin-right: 0 !important;}




$('#menu_toggle').on('click', function(){
    $('#side-menu').toggleClass('sideMenuToggle');
})
4

1 に答える 1

0

vals が言ったことの可能性が最も高いです。それを修正するには、に変更できるはずですmargin-right: -80%。そうすれば、margin-right は width と同じになり、見えなくなります。

現在、パディング、ボーダー、およびシャドウにより、まだ少し表示される場合があります。最初の 2 つは、要素を に変更することで処理できます。box-sizing: border-boxつまりwidth、幅、パディング、境界線の合計が含まれ、それらのサイズは要素の完全なサイズから差し引かれます。詳細については、こちらをご覧ください。

http://css-tricks.com/box-sizing/

ただし、ボックスの影は引き続き表示されます。だから、それらもアニメーション化してください！追加transition: box-shadow 1sして開始し、クラスbox-shadow: 4px 0 5px rgba(0,0,0,0)に追加box-shadow: 4px 0 5px #484848します。sideMenuToggle

うまくいけば、それは役に立ちます！

（PSこれはテストされていないため、ボックスシャドウをアニメーション化できるかどうかさえわかりません。動作させるには #484848 を RGBA 値に変換する必要があるかもしれませんが、できるはずです。）

于 2013-09-05T21:28:01.243 に答える