-webkit-transform：使用位置：绝对答案

【问题标题】：-webkit-transform: using position:absolute-webkit-transform：使用位置：绝对
【发布时间】：2012-07-29 02:13:59
【问题描述】：

我有一系列 div 使用 -webkit-transform 从负边距顶部向下滑动到屏幕上的某个位置。问题是，如果没有对它们应用负边距顶部，它们最终会停留在通常会坐的位置。

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

我主要担心的是，如果 dropdiv1 的高度发生变化，那么我将不得不重置 click 函数上的值，以使其他 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>

【问题讨论】：

标签： jquery webkit css-transitions css-transforms

【解决方案1】：

我真的没有看到动画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来制作动画。

【讨论】：

谢谢罗宾，但我更担心的是，如果我必须添加更多内容来说 dropdiv1，那么这将需要我重置所有其他 div 的负面位置 - 例如：如果我将 20px 添加到 driodiv1 的高度我必须将 20px 添加到其他 div 以确保它们在显示时再次正确排列
你不能创建一个函数来相应地测量和定位三个盒子，让它在高度或内容变化时运行吗？
嗯，我真的不具备这样做的技能水平......可以用z-indexes或绝对位置来实现吗？
抱歉，我开始对你真正想要的是什么感到困惑。
是的，这有点难以解释。我已经添加了上面的 HTML 来尝试和帮助。基本上，虽然 3 个 dropdiv 在被点击之前被“隐藏”在页面上方，但它们通常所在的 ul 下方仍有空白区域。因此，例如，如果我单击 clickme2 以显示 dropdiv2，它将出现在页面的中间，其中空白表示其上方的 dropdiv1 的高度，空白表示其下方的 dropdiv3 的高度。因此，我使用负边距将其定位在页面的更上方……希望对您有所帮助！

【解决方案2】：

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

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

不是特别喜欢，但可以！

【讨论】：