Wie kommen meine Divs während einer Transition herum?

Question

Ich habe eine Reihe von Rechteck <div> Elemente, die ich verwenden, um einige Unternehmen anzuzeigen. Wenn Sie den Mauszeiger über das Element bewegen, werden einige zusätzliche Felder mit anklickbaren Links unterhalb des Rechtecks ​​angezeigt. Wenn der Benutzer aufhört zu schweben, verschwinden diese Felder. Das Problem ist, die Benutzeroberfläche ist sehr nervös, wenn es andere Felder unter dieser :hovered Box gibt.

Ich habe margin-bottom: 60px auf <div> gesetzt. Wenn der Benutzer schwebt, wird eine 40-Pixel-Erweiterung darunter angezeigt. Wenn diese Erweiterung herauskommt, setze ich margin-bottom: 20px. Das funktioniert gut zum Ausgehen, aber wenn die Erweiterung eintritt, springt es.

macht mehr Sinn, nach der Fiddle viewing:

Fiddle:http://jsfiddle.net/50q74j9a/2/

Ich mag es nicht um zu springen, wenn der Benutzer über ein Feld hält schweben. Ich weiß, dass es etwas mit dem Übergang zu tun hat, ich weiß einfach nicht, wie ich es beheben soll.

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> 

Teil 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

Es liegt daran, dass Sie nur den Übergang für die height Einstellung, aber Sie verändern sich auch das Element des margin auch. Versuchen Sie dies, damit sie gleichzeitig übergehen.

.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

Statt die Behälterhöhe zu ändern, sollten Sie einen negativen margin-bottom zur Schiebe Info-Box hinzuzufügen. Es ist weniger Arbeit für den Browser, als die Höhe und Position gleichzeitig anzupassen.

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

http://jsfiddle.net/aLabnvss/

Answer 3

min-height für

Division hinzufügen

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