跨单独的组/列表的html元素的平滑随机播放动画

Question

以下是我在shopify主题中拥有的html结构的简化代码段：

'''

/*--- search container---*/
<input type="text" id="search" placeholder="" name="search">
/*--- --------------- ---*/
<div class="product_groups_wrapper">
                  <ul class="product_group" id="search_results" style="display: flex;"></ul>
                  <ul class="product_group" id="tagged_products" style="display: none;"</ul>
                  <ul class="product_group" data-collection-title="Birds">
                        <li class="product_group_title">Birds</li>
                            <li class="product" data-product-handle="chicken-leg" data-product-title="Chicken Leg" data-product-tags="Cured, Meat" style="display: block; visibility: visible;">Chicken Leg</li>
                            <li class="product" data-product-handle="chicken-thighs" data-product-title="Chicken Thighs" data-product-tags="Cured, Meat" style="display: block; visibility: visible;">Chicken Thighs</li>
                            <li class="product" data-product-handle="duck-legs" data-product-title="Duck Legs" data-product-tags="Cured, Meat" style="display: block; visibility: visible;">Duck Legs</li>
                            <li class="product" data-product-handle="guinea-fowl" data-product-title="Guinea Fowl" data-product-tags="Cured, Meat" style="display: block; visibility: visible;">Guinea Fowl</li>
                            <li class="product" data-product-handle="81-day-whole-chicken" data-product-title="81 Day Whole Chicken" data-product-tags="Cured, Meat" style="display: block; visibility: visible;">81 Day Whole Chicken</li>
                            <li class="product" data-product-handle="duck-carcass" data-product-title="Duck Carcass" data-product-tags="Cured, Meat" style="display: block; visibility: visible;">Duck Carcass</li>
                            <li class="product" data-product-handle="chicken-wings" data-product-title="Chicken Wings" data-product-tags="Cured, Meat" style="display: block; visibility: visible;">Chicken Wings</li>
                            <li class="product" data-product-handle="duck-giblets" data-product-title="Duck Giblets" data-product-tags="Cured, Meat" style="display: block; visibility: visible;">Duck Giblets</li>
                            <li class="product" data-product-handle="whole-duck" data-product-title="Whole Duck" data-product-tags="Cured, Meat" style="display: block; visibility: visible;">Whole Duck</li> 
                  </ul>
                  <ul class="product_group" data-collection-title="Fruit">
                        <li class="product_group_title">Fruit</li>
                            <li class="product" data-product-handle="pomegranate" data-product-title="Pomegranate" data-product-tags="Fruit &amp; Veg" style="display: block; visibility: visible;">Pomegranate</li>
                            <li class="product" data-product-handle="pineapple" data-product-title="Pineapple" data-product-tags="Fruit &amp; Veg" style="display: block; visibility: visible;">Pineapple</li>
                            <li class="product" data-product-handle="kiwis" data-product-title="Kiwis" data-product-tags="Fruit &amp; Veg" style="display: block; visibility: visible;">Kiwis</li>
                            <li class="product" data-product-handle="strawberries" data-product-title="Strawberries" data-product-tags="Fruit &amp; Veg" style="display: block; visibility: visible;">Strawberries</li>
                            <li class="product" data-product-handle="raspberries" data-product-title="Raspberries" data-product-tags="Fruit &amp; Veg" style="display: block; visibility: visible;">Raspberries</li>
                            <li class="product" data-product-handle="blueberries" data-product-title="Blueberries" data-product-tags="Fruit &amp; Veg" style="display: none; visibility: visible;">Blueberries</li>
                            <li class="product" data-product-handle="grapefruit" data-product-title="Grapefruit" data-product-tags="Fruit &amp; Veg" style="display: block; visibility: visible;">Grapefruit</li>
                            <li class="product" data-product-handle="clementines" data-product-title="Clementines" data-product-tags="Fruit &amp; Veg" style="display: block; visibility: visible;">Clementines</li>
                            <li class="product" data-product-handle="oranges" data-product-title="Oranges" data-product-tags="Fruit &amp; Veg, Organic" style="display: block; visibility: visible;">Oranges</li>
                            <li class="product" data-product-handle="limes" data-product-title="Limes" data-product-tags="Fruit &amp; Veg, Organic" style="display: block; visibility: visible;">Limes</li>
                            <li class="product" data-product-handle="lemons" data-product-title="Lemons" data-product-tags="Fruit &amp; Veg, Organic" style="display: block; visibility: visible;">Lemons</li>
                            <li class="product" data-product-handle="bananas" data-product-title="Bananas" data-product-tags="Fruit &amp; Veg, Organic" style="display: none; visibility: visible;">Bananas</li>
                            <li class="product" data-product-handle="gala-apples" data-product-title="Gala Apples" data-product-tags="Fruit &amp; Veg, Organic" style="display: block; visibility: visible;">Gala Apples</li>
                            <li class="product" data-product-handle="pears" data-product-title="Pears" data-product-tags="Fruit &amp; Veg, Organic" style="display: block; visibility: visible;">Pears</li>
                            <li class="product" data-product-handle="rhubarb" data-product-title="Rhubarb" data-product-tags="Fruit &amp; Veg, Organic" style="display: block; visibility: visible;">Rhubarb</li>    
                  </ul>
                </div> 

'''

page screenshot

每个产品组（ul）仅包含基本文字/词，并且在搜索时，产品（li）应该（或看上去）被“混洗”到容器（ul）顶部的搜索结果组中。在主菜单中选择其标签/过滤器时，尽管它们将附加到已标记的产品组，但也会产生相同的效果。

[我正在尝试实现一种在shuffle.js（https://vestride.github.io/Shuffle/）中看到的动画类型，在这种动画中，产品在重新排序/过滤时似乎会彼此移动（在这种情况下，即移动到搜索结果/带有div的位置）。] >

与shuffle.js布局不同，主容器中有多个项目列表，而不是单个列表/容器中的所有项目。此外，已过滤/搜索到的项目应离开其列表，并最终出现在搜索结果/已标记的列表中。

我使用以下命令在搜索中设置了一些基本的淡入/淡出：

'''

(function($){
$.fn.animateTo = function(destination) {
    var target = this.clone(true).appendTo(destination).fadeIn(500);
    $(this).fadeOut(500);
}
})(jQuery);

// Search (ajax api), on keyup in searchbar
$( '#search' ).on( 'keyup', function ( e )  {

  var query = $("#search").val();
  console.log(query);

  //if query isnt empty, perform search, display results
  if ( query ) {


      jQuery.getJSON("/search/suggest.json", {
      "q": query,
      "resources": {
        "type": "product",
        "limit": 10,
        "options": {
          "unavailable_products": "hide",
          "fields": "title,product_type,tag"
        }
      }
    }).done(function(response) {


       $("#search_results").empty();
       var productArray = response.resources.results.products;

        $('#search_results').append('<li class="product_group_title">' + query + '</li>');
        $('#tagged_products').css('display', 'none');
        $('#search_results').css('display', 'flex');
        $('#search_results .product').css('display', 'block');

        for(var i=0; i < productArray.length; i++) {

          console.log(productArray[i].handle);
        // get product handle, run a find where dat-product-handle ==
          var match = $("[data-product-handle='" + productArray[i].handle + "']")

          console.log('Matching element....');
          console.log(match);
          $(match).animateTo('#search_results');


        };

        $('.product').not('#search_results .product').css('display', 'block');


    });
  } else {

  //if query is empty, hide search results area
  $('#search_results').css('display', 'none'); 
  $('.product').css('visibility', 'visible');

  }

});
'''

尝试在这种结构上实现shuffle.js动画效果的最佳起点是哪里？

谢谢

以下是我在shopify主题中拥有的html结构的简化代码段：'''/ * ---搜索容器--- * / / * --- ---------- -...