-webkit-transform:使用位置:绝对

Question

我有一系列的div，它们使用-webkit-transform从负边距顶部滑动到屏幕上的某个位置。问题是，如果没有负的边际顶部应用于它们，它们最终会出现在正常情况下的位置。

这意味着如果我显示第二个div，它上面有一个第一个div大小的空白空间。为了解决这个问题，我可以在第二个div上应用一个负边距顶，但我认为这很混乱。

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

有没有办法将-webkit-transform修改为包含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>

Answer 1

好的，我找到了一种解决方案。仍然很乱，但还可以：

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

不是一个特别的粉丝，但它会做的！

Answer 2

我真的看不到任何用于动画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');

或者在应用position: absolute之前运行.offset()，并使用top和left制作动画。