JQuery/CSS 转换 : Easier way without using negative margins?

Question

我有一个 PhoneGap/Cordova 项目，这意味着我必须结合使用 JQuery 和 CSS 转换来实现动画(JQuery 动画在 iOS 上很笨重)。

我编写了一些实现一系列下拉菜单的代码，但是我认为它做得很糟糕，我正在寻找一些有关如何改进它的建议。

我主要关心的是 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)');
                        });

Answer 1

我对 css 做了一些更改 - 添加position:absolute和 z-index 到#dropdivs。这解决了它们彼此“堆叠”的问题。然后，我将每个 div 放置在其各自的 #clickme div/按钮下，以便当它出现时，它会出现在正确的位置。

唯一的缺点是我必须设置页面的高度以在显示时容纳最高的#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;
}