我正尝试通过此Isotope的“加载更多”按钮来更改动画,但是我已经遍历了所有代码,但仍然不知道该怎么做。正如您在下面的第一个gif中看到的那样,“新”项目的行为就像它们被堆叠在一起然后移至所需位置。我正在尝试实现类似第二个gif的效果,其中项目会逐渐消失在其位置。
第一个gif
第二个gif
您也可以在this JSFiddle中看到它。
// external js: isotope.pkgd.js
$(document).ready(function() {
// init Isotope
var $container = $('.isotope').isotope({
itemSelector: '.element-item',
layoutMode: 'fitRows'
});
// bind filter button click
$('#filters').on('click', 'button', function() {
var filterValue = $(this).attr('data-filter');
$container.isotope({
filter: filterValue
});
});
// change is-checked class on buttons
$('.button-group').each(function(i, buttonGroup) {
var $buttonGroup = $(buttonGroup);
$buttonGroup.on('click', 'button', function() {
$buttonGroup.find('.is-checked').removeClass('is-checked');
$(this).addClass('is-checked');
});
});
//****************************
// Isotope Load more button
//****************************
var initShow = 8; //number of items loaded on init & onclick load more button
var counter = initShow; //counter for load more button
var iso = $container.data('isotope'); // get Isotope instance
loadMore(initShow); //execute function onload
function loadMore(toShow) {
$container.find(".hidden").removeClass("hidden");
var hiddenElems = iso.filteredItems.slice(toShow, iso.filteredItems.length).map(function(item) {
return item.element;
});
$(hiddenElems).addClass('hidden');
$container.isotope('layout');
//when no more to load, hide show more button
if (hiddenElems.length == 0) {
jQuery("#load-more").hide();
} else {
jQuery("#load-more").show();
};
}
//when load more button clicked
$("#load-more").click(function() {
if ($('#filters').data('clicked')) {
//when filter button clicked, set initial value for counter
counter = initShow;
$('#filters').data('clicked', false);
} else {
counter = counter;
};
counter = counter + initShow;
loadMore(counter);
});
//when filter button clicked
$("#filters").click(function() {
$(this).data('clicked', true);
loadMore(initShow);
});
});
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
font-family: sans-serif;
}
.hidden {
visibility: hidden;
width: 0px !important;
height: 0px !important;
margin: 0px !important;
padding: 0px !important;
}
/* ---- isotope ---- */
.isotope {
border: 1px solid #333;
}
/* ---- .element-item ---- */
.element-item {
width: 100px;
height: 100px;
margin: 5px;
padding: 10px;
}
.element-item.item-1 {
background: #e03a3e;
}
.element-item.item-2 {
background: #f5821f;
}
.element-item.item-3 {
background: #fdb827;
}
.element-item.item-4 {
background: #61bb46;
}
.element-item.item-5 {
background: #2c73d2;
}
.element-item.item-6 {
background: #933196;
}
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.js"></script>
<h1>Isotope - Load more button</h1>
<div id="filters" class="button-group">
<button class="button is-checked" data-filter="*">show all</button>
<button class="button" data-filter=".item-1">item-1</button>
<button class="button" data-filter=".item-2">item-2</button>
<button class="button" data-filter=".item-3">item-3</button>
<button class="button" data-filter=".item-4">item-4</button>
<button class="button" data-filter=".item-5">item-5</button>
<button class="button" data-filter=".item-6">item-6</button>
</div>
<div class="isotope">
<div class="element-item item-5" data-category="item-5">5</div>
<div class="element-item item-1" data-category="item-1">1</div>
<div class="element-item item-5" data-category="item-5">5</div>
<div class="element-item item-4" data-category="item-4">4</div>
<div class="element-item item-4" data-category="item-4">4</div>
<div class="element-item item-2" data-category="item-2">2</div>
<div class="element-item item-5" data-category="item-5">5</div>
<div class="element-item item-1" data-category="item-1">1</div>
<div class="element-item item-4" data-category="item-4">4</div>
<div class="element-item item-3" data-category="item-3">3</div>
<div class="element-item item-4" data-category="item-4">4</div>
<div class="element-item item-3" data-category="item-3">3</div>
<div class="element-item item-4" data-category="item-4">4</div>
<div class="element-item item-1" data-category="item-1">1</div>
<div class="element-item item-5" data-category="item-5">5</div>
<div class="element-item item-5" data-category="item-5">5</div>
<div class="element-item item-3" data-category="item-3">3</div>
<div class="element-item item-3" data-category="item-3">3</div>
<div class="element-item item-3" data-category="item-3">3</div>
<div class="element-item item-2" data-category="item-2">2</div>
<div class="element-item item-6" data-category="item-6">6</div>
<div class="element-item item-5" data-category="item-5">5</div>
<div class="element-item item-3" data-category="item-3">3</div>
<div class="element-item item-2" data-category="item-2">2</div>
<div class="element-item item-6" data-category="item-6">6</div>
<div class="element-item item-3" data-category="item-3">3</div>
<div class="element-item item-5" data-category="item-5">5</div>
<div class="element-item item-3" data-category="item-3">3</div>
<div class="element-item item-6" data-category="item-6">6</div>
<div class="element-item item-1" data-category="item-1">1</div>
<div class="element-item item-4" data-category="item-4">4</div>
<div class="element-item item-2" data-category="item-2">2</div>
<div class="element-item item-3" data-category="item-3">3</div>
<div class="element-item item-1" data-category="item-1">1</div>
</div>
<button id="load-more">Load more</button>
先谢谢了,
路易斯。