jqueryでの要素の整列アニメーションに関して

Question

表題の件に関して下記アドレスに「isotope」というjqueryのプラグインを使用して、フィルター「ALL,house,clinic,other」等で表示の仕分けが出来るサイトを構築しております。
http://staging.alitomo.com/form/gallery/

いつもではないのですが、整列アニメーションの際に終了間際に小刻みに揺れる現象が出てしまいます。
※ALLを押した後、houseやclinicを押すとよく出ます。
※またこの減少はPCで発生するのですが、アンドロイド等のスマートフォンでは発生しません。

こちらの小刻みに揺れる現象をどうにかしたいのですが、どうにも分かりません。
ご教授いただければ幸いです。

<div class="gallery archive fix_mt" style="margin-top: 104px;">
	<h2 class="f_rl">gallery</h2>
	<div class="iso_btn f_rl">
		<button class="all button" data-filter="*">all</button><button id="house" class="button is-checked" data-filter=".house">house</button><button id="clinic" class="button" data-filter=".clinic">clinic</button><button id="other" class="button" data-filter=".other">other</button>	
	</div>
	<div class="gallery_box" >
		<a class="th_box house" href="http://staging.alitomo.com/form/gallery/kadotayashiki-1-house/" ><img src="http://staging.alitomo.com/form/wp-content/uploads/2019/12/10.jpg"></a>
		
		・・・・
		<a class="th_box house" href="http://staging.alitomo.com/form/gallery/kadotayashiki-1-house/" ><img src="http://staging.alitomo.com/form/wp-content/uploads/2019/12/10.jpg"></a>
	</div>
</div>

// filter items on button click
$('.iso_btn').on( 'click', 'button', function() {
	var filterValue = $(this).attr('data-filter');
	$container.isotope({ filter: filterValue });
	$('.iso_btn button').removeClass('is-checked');
	$(this).addClass('is-checked');
	//console.log(filterValue);
});	


// init Isotope
var $container = $('.gallery_box');
	$container.imagesLoaded(function(){
		$container.isotope({
		itemSelector: '.th_box',
		transitionDuration: '0.5s',
	});

});  

Answer 1

質問文に記載されているコードだけでは問題は再現しませんでした。

http://staging.alitomo.com/form/gallery/
こちらを拝見したところ、該当の箇所に独自のcssでtransitionが設定されており、これを外すことで問題が解決することを確認しました。

transition設定によって画像が震えることについてはプラグインの配布元のFAQに記載がありましたので読んでみてください。
https://isotope.metafizzy.co/faq.html

Items jump after transitioning position

This double transition jump bug occurs when CSS transitions are enable for all properties on item elements.
Fix it by setting transition properties to only the properties that will be transitioning.

具体的には以下のスタイル指定を削除してください。プラグインと競合してしまっています。

.content_wrapper.pc a {
    transition: 1s ease;
}

.th_box {
    transition: 0.5s !important;
}

Comments

[alitomo]

ありがとうございます。m(__)m
無事に治りました。