-webkit-transform：使用位置：絕對

Question

我有一系列的div使用-webkit-transform從負邊距向下滑動到屏幕上的位置。問題在於，如果沒有適用於他們的上升利潤率，他們最終會在他們通常會坐的地方。

這意味着，如果我顯示第二個div它有一個空的空間上的第一個div的大小。爲了解決這個問題，我可以在第二格應用負邊距，但我認爲這很麻煩。

我主要關心的是，如果dropdiv1的高度發生變化，那麼我將不得不重置點擊函數上的值，讓其他div在顯示時再次正確排列。

有沒有辦法修改-webkit-transform合併postion：絕對？

我當前的代碼是：

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動畫。