Question

我有一个PhoneGap / Cordova项目，这意味着我必须结合使用JQuery和CSS过渡来实现动画（iOS上的JQuery动画很粗糙）。

我已经制作了一些实现了一系列下拉菜单的代码，但是我觉得这样做很糟糕，我正在寻找一些如何改进它的建议。

我主要担心的是div的定位，尤其是负边距的使用。

如果我要更改div的长度，它会通过一切不对齐 - 我必须应用负边距顶部让它们显示在屏幕顶部，否则他们会坐在底部好像他们已经正常装载，一个接一个。

另外，如果没有应用翻译，我会在页面底部获得大量的空格，其中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进行了一些更改 - 添加位置：绝对和#dropdivs的z索引。这解决了他们“堆叠”在一起的问题。然后我将每个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;
}

JQuery / CSS转换：更轻松的方式而不使用负边距？

1 个答案: