javascript - 改变同位素的元素动画

Question

解释

我正在尝试从此Isotope的“加载更多”按钮更改动画，但我已经浏览了所有代码，但仍然无法弄清楚如何去做。正如您在下面的第一个 gif 中看到的那样，“新”项目的行为就像它们被堆叠起来，然后转到它们想要的位置。我正在尝试实现第二个 gif 之类的东西，其中项目只是淡入它们的位置。

第一个 gif

第二个 gif

代码

您也可以在这个 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>

在此先感谢
路易斯。

标签： javascripthtmlcssjquery-isotope