0

-webkit-transform負のマージントップから画面上の位置までスライドする一連の div があります。問題は、負のマージントップが適用されていない場合、通常座っている場所になってしまうことです。

これは、2 番目の div を表示すると、その上に最初の div のサイズの空きスペースがあることを意味します。これを解決するために、2 番目の div に負の margin-top を適用できますが、それは面倒だと思います。

私の主な懸念は、dropdiv1 の高さが変更された場合、クリック関数の値をリセットして、表示されたときに他の div が再び正しく整列するようにする必要があることです。

-webkit-transformpostion:absolute を組み込むように修正する方法はありますか?

私の現在のコードは次のとおりです。

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)');
                        });

HTML:

<ul class="mainmenu">
 <li><a id="clickme1" href="#">Click Me 1</a></li>
 <li><a id="clickme2" href="#">Click Me 2</a></li>     
 <li><a id="clickme3" href="#">Click Me 3</a></li>
</ul>

                <div class="showdata"  id="dropdiv1">
                    Lots of random text....
                </div>

                <div class="showdata"  id="dropdiv2">
                    Lots of random text....
                </div>

                <div class="showdata"  id="dropdiv3">
                   Lots of random text....
                </div>
4

2 に答える 2

0

OK私は一種の解決策を見つけました。まだ面倒ですが、大丈夫です：

<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-06-27T03:21:33.817 に答える
0

アニメーション化の論理的な動作は実際にはわかりませんposition: absolute。

これは読みやすいでしょう：

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

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

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

次に、代わりにクラスを追加します。

$('#dropdiv3').addClass('anim');

それ、または.offset()適用する前に実行して、それをアニメーションposition: absoluteに使用します。topleft

于 2012-06-26T06:55:36.610 に答える