Aymeric B Aymeric B - 6 months ago 52
Javascript Question

Using Semantic-ui and Isotope.js - items shakes after the transition

I'm having some trouble with isotope.js used with the Semantic UI framework, as you can see, the items are "shaking" after any transition.

I already read that answer isotope shakes after the transition but it didn't help me

Thanks in advance






$(window).load(function() {

// init Isotope
var $container = $('.isotope').isotope({
itemSelector: '.element-item',
layoutMode: 'masonry',
getSortData: {
name: '.name',
number: '.number parseInt',
category: '[data-category]'
}
});

// bind filter button click
$('#filters').on( 'click', 'button', function() {
var filterValue = $( this ).attr('data-filter');
$container.isotope({ filter: filterValue });
});

// bind sort button click
$('#sorts').on( 'click', 'button', function() {
var sortByValue = $(this).attr('data-sort-by');
$container.isotope({ sortBy: sortByValue });
});

// change is-checked class on buttons
$('.buttons').each( function( i, buttonGroup ) {
var $buttonGroup = $( buttonGroup );
$buttonGroup.on( 'click', 'button', function() {
$buttonGroup.find('.active').removeClass('active');
$( this ).addClass('active');
});
});
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.2/isotope.pkgd.js"></script>

<div class="ui container">

<h2>Filtering</h2>
<div id="filters" class="ui buttons">
<button class="ui button active" data-filter="*">All</button>
<button class="ui button" data-filter=".metal">Metal</button>
<button class="ui button" data-filter=".transition">Transition</button>
<button class="ui button" data-filter=".noble-gas">Noble gaz</button>
</div>

<div class="ui divider"></div>

<h2>Sorting</h2>
<div id="sorts" class="ui buttons">
<button class="ui button active" data-sort-by="original-order">0riginal order</button>
<button class="ui button" data-sort-by="number">Likes</button>
<button class="ui button" data-sort-by="name">Name</button>
</div>

<div class="ui divider"></div>
<div class="segment">
<div class="ui fluid cards isotope">

<div class="ui fluid card element-item transition metal" data-category="transition">
<div class="content">
<i class="right floated like icon"></i>
<i class="right floated star icon"></i>
<div class="header name">A</div>
<div class="description">
<p></p>
</div>
</div>
<div class="extra content">
<span class="left floated like">
<i class="like icon"></i>
<span class="number">31</span> Like
</span>
<span class="right floated star">
<i class="star icon"></i>
Favorite
</span>
</div>
</div>

<div class="ui fluid card element-item transition lanthanoid metal inner-transition " data-category="lanthanoid">
<div class="content">
<i class="right floated like icon"></i>
<i class="right floated star icon"></i>
<div class="header name">D</div>
<div class="description">
<p></p>
</div>
</div>
<div class="extra content">
<span class="left floated like">
<i class="like icon"></i>
<span class="number">34</span> Like
</span>
<span class="right floated star">
<i class="star icon"></i>
Favorite
</span>
</div>
</div>

<div class="ui fluid card element-item transition metal" data-category="transition">
<div class="content">
<i class="right floated like icon"></i>
<i class="right floated star icon"></i>
<div class="header name">H</div>
<div class="description">
<p></p>
</div>
</div>
<div class="extra content">
<span class="left floated like">
<i class="like icon"></i>
<span class="number">36</span> Like
</span>
<span class="right floated star">
<i class="star icon"></i>
Favorite
</span>
</div>
</div>

<div class="ui fluid card element-item lanthanoid metal inner-transition " data-category="lanthanoid">
<div class="content">
<i class="right floated like icon"></i>
<i class="right floated star icon"></i>
<div class="header name">E</div>
<div class="description">
<p></p>
</div>
</div>
<div class="extra content">
<span class="left floated like">
<i class="like icon"></i>
<span class="number">63</span> Like
</span>
<span class="right floated star">
<i class="star icon"></i>
Favorite
</span>
</div>
</div>

<div class="ui fluid card element-item noble-gas nonmetal " data-category="noble-gas">
<div class="content">
<i class="right floated like icon"></i>
<i class="right floated star icon"></i>
<div class="header name">J</div>
<div class="description">
<p></p>
</div>
</div>
<div class="extra content">
<span class="left floated like">
<i class="like icon"></i>
<span class="number">23</span> Like
</span>
<span class="right floated star">
<i class="star icon"></i>
Favorite
</span>
</div>
</div>

<div class="ui fluid card element-item transition metal" data-category="transition">
<div class="content">
<i class="right floated like icon"></i>
<i class="right floated star icon"></i>
<div class="header name">B</div>
<div class="description">
<p></p>
</div>
</div>
<div class="extra content">
<span class="left floated like">
<i class="like icon"></i>
<span class="number">86</span> Like
</span>
<span class="right floated star">
<i class="star icon"></i>
Favorite
</span>
</div>
</div>

<div class="ui fluid card element-item lanthanoid metal inner-transition " data-category="lanthanoid">
<div class="content">
<i class="right floated like icon"></i>
<i class="right floated star icon"></i>
<div class="header name">Z</div>
<div class="description">
<p></p>
</div>
</div>
<div class="extra content">
<span class="left floated like">
<i class="like icon"></i>
<span class="number">45</span> Like
</span>
<span class="right floated star">
<i class="star icon"></i>
Favorite
</span>
</div>
</div>

</div>
</div>
</div>




Answer

I had the exact same problem using Semantic UI cards with masonary.js. I started fiddling around and managed to get rid of the issue by removing this css rule:

.ui.cards > .card, .ui.card {
    transition: box-shadow 0.1s ease 0s, transform 0.1s ease 0s, -webkit-transform 0.1s ease 0s;
}

Hope it helps!

Comments