Как решить проблему с рывками при анимации?

Question

[Алексей Тутубалин]

При нажатии на первый элемент колапса(отключающая арматура) с начало появляются на секунду уменьшенные картинки потом нормальные, и изменение высоты происходит рывком, уже всю голосу сломал
сайт

<a data-toggle="collapse" href="#multiCollapseExample10" role="button" aria-expanded="false" aria-controls="multiCollapseExample10"><img src="{THEME}/images/otkl_arm.png" alt="Отключающая арматура"  /></a>							
<div class="collapse multi-collapse animated  zoomIn" id="multiCollapseExample10">
	<div class="card card-body ">
		<a href="#"><img src="/files/product/klapan-otsekatel_k302.png" /></a>
		<a href="#"><img src="/files/product/klapan-otsekatel_k302_c_dve_zaxlopki.png" /></a>
	</div>
</div>

Comments

[Кирилл Арутюнов]

А где код?

[Алексей Тутубалин]

Кирилл Арутюнов, Поправил вопрос

Answer 1

[Антон Усачев]

.collapse.in {
    display: block;
}

Этот стиль вызывает рывок. Дело в том, что вначале элементы скрыты, имеют нулевую высоту. При нажатии на триггер начинается анимация, а через полсекунды примерно к этому самому .multi-collapse... добавляется класс .collapse.in.
Начать можно с того, чтобы нормально сверстать эту группу элементов, чтобы не было неблочных ссылок и картинок, которые флотятся поодиночке внутри одного контейнера. А там, глядишь, и решение само придет: например – не использовать встроенные функции появления элементов от бутстрапа и применять эффект появления к правильным узлам.

Comments

[Алексей Тутубалин]

Чем например можно заменить бутстрап в данном случае?

[Антон Усачев]

Алексей Тутубалин, masonry неплохо справляется.

[Алексей Тутубалин]

Антон Усачев, Так не хотелось её использовать, так ка она довольно тяжелая ) но похоже прийдётся

[Алексей Тутубалин]

из-за чего такое может получаться?

[Антон Усачев]

Алексей Тутубалин, картинки не успели подгрузиться.
imagesLoaded

Answer 2

[SeltonSoer]

Попробуй Jquery подрубить..

Comments

[Алексей Тутубалин]

Подключен jQuery v2.2.4

[SeltonSoer]

Алексей Тутубалин, так просто сложно сказать. Нужно код видеть, тыкать, пробовать..