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

Question

我有一堆矩形 <div>我用来展示一些公司的元素。当您将鼠标悬停在该元素上时，它会在矩形下方显示几个额外的框，其中包含可点击的链接。当用户停止悬停时，这些框就会消失。问题是，如果这个 :hovered 下面还有其他框，UI 会非常跳动。盒子。

我设置了margin-bottom: 60px在 <div> 上.当用户悬停时，下方会出现一个 40px 的扩展。当这个扩展出来时，我设置了margin-bottom: 20px .这适用于外出，但当扩展进入时，它会跳跃。

在查看 Fiddle 后更有意义:

fiddle : 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