0
我在使用與語義UI框架一起使用的isotope.js時遇到了一些麻煩，正如您所看到的，這些項目在任何轉換後都會「搖晃」。使用Semantic-ui和Isotope.js - 轉換後的項目搖晃
我已經讀了答案isotope shakes after the transition但使用語義UI卡，它也沒有幫助我
在此先感謝
$(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>
「正如你所看到的」？嗯，我們怎麼能看到沒有鏈接到jsfiddle或您的網站？ – Macsupport
您可以點擊問題底部的那個按鈕，那個說「運行代碼片段」的人 –
任何解決方案呢？ –