在轉換過程中，我的div如何跳來跳去？

我有一堆矩形<div>元素，我用來顯示一些公司。當您將鼠標懸停在元素上時，它會在矩形下方顯示一些額外的包含可點擊鏈接的框。當用戶停止盤旋時，這些盒子就會消失。問題是，如果在此:hovered框下方有其他方框，UI會非常跳躍。在轉換過程中，我的div如何跳來跳去？

我對<div>設置了margin-bottom: 60px。當用戶懸停時，下方會出現一個40像素的擴展。當這個擴展出來時，我設置了margin-bottom: 20px。這適用於外出，但是當擴展進行時，它會跳轉。

觀看小提琴後更有意義：

小提琴：http://jsfiddle.net/50q74j9a/2/

我想，當用戶停止徘徊在一個盒子它不是跳來跳去。我知道這與轉變有關，我只是不知道如何解決它。

HTML：

<div class="catalog-item" data-categories="1"> 
     <div class="item-title"> 
      <img style="visibility: hidden" src="/Content/images/white_square_icon.gif" alt="menu-icon" /> 
      <div style="visibility: hidden" class="favorite-icon-inactive"></div> 
     </div> <a href="#" target="_blank"> 
      <img class="supplier-logo" src="http://vignette4.wikia.nocookie.net/cswikia/images/d/d6/Steam_logo_2014.png/revision/latest?cb=20140910122059" alt="Steam Bakery logo" /></a> 

     <div class="supplier-name">Steam Bakery</div> 
     <div class="supplier-info"> <span><a href="#" target="_blank">Program Info</a></span> 
    <span class="contact-info">Contact Info</span> 

    </div> 
</div>

部分CSS：

.catalog-item { 
    width: 150px; 
    height: 175px; 
    margin-right: 20px; 
    /*margin-bottom: 20px;*/ 
    margin-bottom: 60px; 
    background-color: white; 
    border: 1px solid #0E80B4; 
    display: inline-block; 
    vertical-align: top; 
    position: relative; 
    -moz-transition: height .4s; 
    -webkit-transition: height .4s; 
    -o-transition: height .4s; 
    transition: height .4s; 
    text-align: center; 
} 
.catalog-item:hover { 
    height: 215px; 
    margin-bottom: 0; 
}

來源

2015-09-09 AlbatrossCafe

這是因爲你只設置了height過渡，但你也正在改變元素的margin爲好。試試這個，讓它們同時過渡。

.catalog-item { 
    width: 150px; 
    height: 175px; 
    margin-right: 20px; 
    /*margin-bottom: 20px;*/ 
    margin-bottom: 60px; 
    background-color: white; 
    border: 1px solid #0E80B4; 
    display: inline-block; 
    vertical-align: top; 
    position: relative; 
    -moz-transition: all .4s; 
    -webkit-transition: all .4s; 
    -o-transition: all .4s; 
    transition: all .4s; 
    text-align: center; 
}

JSFiddle

來源

2015-09-09 20:16:11 imtheman

快速和刪除:) –

@OriDrori最快繪製堆棧添加min-height。 ;）好的，不是真的，我只是很幸運。 – imtheman

很酷。這是我第一次使用'transition' CSS屬性。謝謝你的小提琴！ – AlbatrossCafe

而是改變容器的高度，你應該負下邊距增加了滑動信息框。瀏覽器的工作量要少於同時調整高度和位置。

.catalog-item:hover .supplier-info { 
    margin-bottom: -47px; 
}

http://jsfiddle.net/aLabnvss/

來源

2015-09-09 20:27:41

這有效，但我不喜歡當額外內容出現/消失時div底部的視覺效果 – AlbatrossCafe

我還想評論說這比「最佳答案」解決方案更快。在速度較慢的計算機上，如果頁面上有很多條目，最好的解決方案可能會停滯不前。這個更適合舊PC。 – AlbatrossCafe

除法

.catalog-item {min-height:215px;}

來源

2015-09-10 05:12:31 user5319700

在轉換過程中，我的div如何跳來跳去？

回答

相關問題