Javascript 标记列表过滤器动画

Stack overflow社区，通过一些web资源和来自这个伟大社区的一些用户的帮助，创建了下面的标记列表过滤器。对任何类型的数据进行排序，并根据需要使用尽可能多的标记，这非常好

我想请您看看结果，并建议如何将一些动画添加到其中，或者可能添加一些外部库，以便块的外观和重构看起来更加平滑和自然

例如，当我试图找到类似于过滤的想法时，我发现这很棒，他们制作的动画非常棒，但不幸的是，这个插件不允许过滤2个或更多不同标签列表中的数据

HTML

<h2>Composition</h2> 
<ul class="filter" id="composition">
    <li><a data-value="all" class="selected">All</a> </li>
    <li><a data-value="landscape">Landscape</a></li> 
    <li><a data-value="portait">Portait</a> </li>
    <li><a data-value="square">Square</a> </li>
</ul>

<h2>People</h2>
<ul class="filter" id="people">
    <li><a data-value="all" class="selected">All</a> </li>
    <li><a data-value="people">People</a></li> 
    <li><a data-value="nopeople">No People</a></li>
</ul>

<h2>Theme</h2>
<ul class="filter" id="theme">
    <li><a data-value="all" class="selected">All</a> </li>
    <li><a data-value="Nature">Nature</a></li> 
    <li><a data-value="Fashion">Fashion</a></li> 
    <li><a data-value="Mountains">Mountains</a></li> 
    <li><a data-value="Sea">Sea</a></li>    
</ul>

<h2>Data to filter</h2> 
    <div class="item landscape people Nature"></div> 
    <div class="item portait nopeople Fashion"></div> 
    <div class="item landscape people Mountains"></div> 
    <div class="item portait people Sea"></div> 
    <div class="item square people Mountains"></div> 
    <div class="item landscape people Fashion"></div> 
    <div class="item square nopeople Sea"></div> 
    <div class="item landscape nopeople Mountains"></div> 
    <div class="item portait people Fashion"></div> 
    <div class="item square nopeople Sea"></div> 

JavaScript

$("ul.filter li a")
    .on('click', function() { 
        var $this = $(this);
        $this
            .closest('ul')
            .find('a')
            .removeClass('selected');
        $this
            .addClass('selected');
        var selector = [];
        $('ul li a.selected')
            .each(function() {
                var selectedValue = $(this).data('value');
                if (selectedValue !== 'all') {
                    selector.push(selectedValue);
                }
            });
        $(".item")
            .hide();
        if (selector.length) {
            $('.item.'+ selector.join('.')).show();
        } else {
            $(".item")
                .show();
        }
    }); 

---

JSFiddle:

您对此有何看法

CSS

li {
   list-style: none; 
}

div {
    height: 100px;
    width: 100px;
    background: grey;
    display: inline-block;
    opacity: 1s;
    transition: opacity 1s ease-in-out;
}

li{
  transition: all 0.5s;
  overflow:hidden;
}

$(".item").css("height","0");
if (selector.length) {
    $('.item.'+ selector.join('.')).css("height", "15px");
}

JS

li {
   list-style: none; 
}

div {
    height: 100px;
    width: 100px;
    background: grey;
    display: inline-block;
    opacity: 1s;
    transition: opacity 1s ease-in-out;
}

li{
  transition: all 0.5s;
  overflow:hidden;
}

$(".item").css("height","0");
if (selector.length) {
    $('.item.'+ selector.join('.')).css("height", "15px");
}

---

我确实觉得这个问题的解决方案（使用css类过滤数据）有点奇怪。您应该将数据添加到JS中，并将其注入html。

这只是一个概念，绝对高度对于较长的项目可能不好，但动画不适合高度：autoHello，Brett我不确定我是否做得很好（）。但无论如何，首先我想道歉，因为我已经加载了旧版本的fiddle for people，在我的例子中，这个插件用照片对块进行排序，我实际上是在尝试制作类似的东西。也许你有一些想法如何实现一些像这家伙做的动画？忘记更新提琴了，请查看保存的：）如果答案正确，请将其标记为答案。