2

私は PhoneGap/Cordova プロジェクトを持っています。つまり、JQuery と CSS トランジションの組み合わせを使用してアニメーションを実現する必要があります (iOS では JQuery アニメーションは分厚いです)。

一連のドロップダウンを実装するコードをいくつか作成しましたが、やり方が悪いと思うので、改善方法についてアドバイスを求めています。

私の主な関心事は、div の配置、特に負のマージンの使用です。

div の長さを変更すると、すべてがずれてしまいます。画面の上部に表示するには、負の margin-top を適用する必要があります。順々に正常にロードされました。

また、翻訳が適用されていない場合、divがあるはずのページの下部に大量の空白ができます。

CSS:

#dropdiv1 {
    -webkit-transform: translate(0, -3000px);
    -webkit-transition: all ease-in 1s;
}

#dropdiv2 {
    -webkit-transform: translate(0, -3400px);
    -webkit-transition: all ease-in 1s;
}

#dropdiv3 {
    -webkit-transform: translate(0, -4200px);
    -webkit-transition: all ease-in 1s;
}

JQuery:

$('#clickme1').click(
                      function() {
                      $('#dropdiv1').css('-webkit-transform','translate(0, -335px)');
                      });

  $('#clickme2').click(
                        function() {
                        $('#dropdiv2').css('-webkit-transform','translate(0, -2335px)');
                        });

  $('#clickme3').click(
                        function() {
                        $('#dropdiv3').css('-webkit-transform','translate(0, -3300px)');
                        });
4

1 に答える 1

0

css にいくつかの変更を加えました - position: absolute と z-index を #dropdivs に追加します。これにより、それらが互いに「積み重なる」という問題が解決されます。次に、各 div をそれぞれの #clickme div/button の下に配置して、表示されたときに適切な位置に表示されるようにします。

これに関する唯一の欠点は、ページの高さを設定して、表示されたときに最も高い #dropdiv に対応する必要があったことです。そうしないと、ページの下部が切り取られてしまいます。

私のコード:

<div id="bigcontainer">
    <ul class="mainmenu">
     <li><a id="clickme1" href="#">Click Me 1</a></li>
                    <div class="showdata"  id="dropdiv1">
                        Lots of random text....
                </div>
 <li><a id="clickme2" href="#">Click Me 2</a></li>
                <div class="showdata"  id="dropdiv2">
                    Lots of random text....
                </div>     
 <li><a id="clickme3" href="#">Click Me 3</a></li>
                <div class="showdata"  id="dropdiv3">
                   Lots of random text....
                </div>
</ul>
</div>

CSS:

#bigcontainer {
height: 1500px;/*as big as the bigest dropdiv to enable scrolling*/
}    

#dropdiv1 {
    -webkit-transform: translate(0, -3000px);
    -webkit-transition: all ease-in 1s;
    z-index: 1;
    position: absolute;
}

#dropdiv2 {
    -webkit-transform: translate(0, -3400px);
    -webkit-transition: all ease-in 1s;
    z-index: 2;
    position: absolute;
}

#dropdiv3 {
    -webkit-transform: translate(0, -4200px);
    -webkit-transition: all ease-in 1s;
    z-index: 3;
    position: absolute;
}
于 2012-07-01T02:38:20.217 に答える