Question

我有一堆矩形<div>元素，我用来显示一些公司。当您将鼠标悬停在元素上时，它会在矩形下方显示一些包含可点击链接的框。当用户停止悬停时，这些框会消失。问题是，如果此:hovered框下方有其他框，则UI非常突出。

我在margin-bottom: 60px上设置了<div>。当用户徘徊时，它下方会出现40px的扩展。当这个扩展出来时，我设置了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;
}

Answer 1

这是因为您只是为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

Answer 2

您应该在滑动信息框中添加负边距底部，而不是更改容器的高度。浏览器的工作量比同时调整高度和位置要少。

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

http://jsfiddle.net/aLabnvss/

为什么我的div在过渡期间会跳来跳去？

2 个答案: