-webkit-transform:使用position:absolute

问题描述

我有一系列的div，这些div使用-webkit-transform从负的上边缘向下滑动到屏幕上的某个位置.问题是，如果没有适用的消隐边缘，它们最终会到达通常坐在那里的位置.

I have a series of divs that slide down using -webkit-transform from a negative margin-top to a position on the screen. Problem is that they end up where they would normally be sitting if there was no negetive margin-top applied to them.

这意味着，如果我显示第二个div，则其上方有一个空白区域，其大小与第一个div的大小相同.为了解决这个问题，我可以在第二个div上应用负的margin-top，但是我觉得那很麻烦.

This means if I show the 2nd div it has an empty space the size of the first div above it. To solve this I can apply a negative margin-top to the 2nd div, but I think thats messy.

我主要担心的是，如果dropdiv1的高度发生变化，那么我将不得不重置click函数的值，以使其他div在显示时再次正确排列.

My main concern is that if the height of dropdiv1 changes then I would have to reset the values on the click functions to have the other divs line up correctly again when shown.

是否可以修改-webkit-transform以合并postion:absolute?

Is there a way to amend -webkit-transform to incorporate postion: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>

推荐答案

好，我找到了一种解决方案.仍然很混乱，但是还可以:

OK I have found a kind of solution. Still messy but 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;
}

不是特别的粉丝，但确实可以！

Not particularly a fan but it will do!

这篇关于-webkit-transform:使用position:absolute的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！