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

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