@Kennius
Начинающий фронт-эндер

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

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

<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>
  • Вопрос задан
  • 287 просмотров
Решения вопроса 1
rockfeeler
@rockfeeler
Фронтендер, дизайнер, верстальщик-перфекционист
.collapse.in {
    display: block;
}


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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы