在转换过程中，我的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如何跳来跳去？

回答

相关问题