Come mai i miei tuffi saltano in giro durante una transizione?

Question

Ho un mucchio di rettangoli <div> elementi che sto usando per visualizzare alcune aziende. Quando passi il mouse sopra l'elemento, visualizza un paio di caselle aggiuntive contenenti collegamenti cliccabili sotto il rettangolo. Quando l'utente interrompe il passaggio del mouse, quelle caselle scompaiono. Il problema è che l'interfaccia utente è molto nervosa se ci sono altre caselle sotto questa casella :hovered.

Ho impostato margin-bottom: 60px su <div>. Quando l'utente si posiziona al di sotto, viene visualizzata un'espansione di 40px. Quando esce questa espansione, ho impostato margin-bottom: 20px. Funziona bene per uscire, ma quando l'espansione entra, salta.

ha più senso dopo aver visto il violino:

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

Vorrei che per non saltare quando l'utente interrompe in bilico su una scatola. So che ha qualcosa a che fare con la transizione, semplicemente non so come risolverlo.

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> 

parziale 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

È perché si sta solo impostando la transizione per la height, ma si sta anche cambiando dell'elemento margin pure. Prova questo in modo che passino allo stesso tempo.

.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

Invece di cambiare l'altezza del contenitore, si dovrebbe aggiungere un negativo margin-bottom alla casella informazioni di scorrimento. È meno lavoro per il browser che regolare l'altezza e la posizione allo stesso tempo.

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

http://jsfiddle.net/aLabnvss/

Answer 3

aggiungere min-height per la divisione

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