Почему мои divs прыгают во время перехода?

У меня есть куча прямоугольника <div> элементов, которые я использую для отображения некоторых компаний. Когда вы наводите курсор на элемент, он отображает дополнительную пару ячеек, содержащих интерактивные ссылки под прямоугольником. Когда пользователь перестает парить, эти коробки уходят. Проблема в том, что пользовательский интерфейс очень нервный, если есть другие поля ниже этого поля :hovered.Почему мои divs прыгают во время перехода?

Я установил margin-bottom: 60px на <div>. Когда пользователь зависает, под ним появляется расширение в 40 пикселей. Когда это расширение выходит, я установил margin-bottom: 20px. Это отлично подходит для выхода, но когда расширение распространяется, оно прыгает.

имеет смысл после просмотра скрипки:

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; 
}

источник

2015-09-09 AlbatrossCafe

Это происходит потому, что вы устанавливаете только переход на 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

источник

2015-09-09 20:16:11 imtheman

Быстро и удален :) –

@OriDrori Quickest рисовать в стеке. ;) Хорошо, не совсем, мне просто повезло. – imtheman

Прохладный. Это мой первый раз, используя свойство CSS перехода. Спасибо за скрипку! – AlbatrossCafe

Вместо изменения высоты контейнера, вы должны добавить отрицательный краю дна к скользящему информационному окну. Для браузера меньше работы, чем настройка высоты и положения в одно и то же время.

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

http://jsfiddle.net/aLabnvss/

источник

2015-09-09 20:27:41

Это работает, но мне не нравится визуальный эффект нижней части div, который не перемещается, когда появляется/исчезает дополнительный контент. – AlbatrossCafe

Я также хотел бы прокомментировать, что это быстрее, чем решение «лучший ответ». На более медленных компьютерах наилучшее решение для ответа может действительно испортиться, если на странице много записей. Это лучше для старых ПК. – AlbatrossCafe

добавить min-height для разделения

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

источник

2015-09-10 05:12:31 user5319700

Почему мои divs прыгают во время перехода?

ответ

Смежные вопросы