基于CSS的动画对元素进行过滤、排序、插入和移出的JS插件 MixItUp

简介

MixItUp是一款功能非常强大的、不依赖任何第三方库的、基于CSS的动画对元素进行过滤、排序、插入和移出插件，带有许多不同的自定义选项和详细的文档。 您可以将其轻松集成到现有布局中。 所需要做的只是针对所需的元素，库将为您完成艰巨的工作。

使用

1.  引入 mixitup.js 文件

2.  HTML

A.  建造容器

首先，我们将要排序和过滤的元素包装在容器中。 每个包装的元素都应指定一个通用的类名。 在这里，类名是mix-target 。 容器将使用此类来标识哪些是目标元素。 此外，还将为此容器分配了唯一的ID（ mix-wrapper ）。 稍后，将其定位为初始化MixItUp的实例。

<ul class="courses" id="mix-wrapper">
  <li class="mix-target">
    <a href="#">Economics<span>(U)</span></a>
  </li>
  
  <li class="mix-target">
    <a href="#">Pharmacology<span>(G)</span></a>
  </li>
  
  <!-- more list items here -->
</ul>

B.  筛选

首先确定内容中的过滤器类别。 在此，我们将使用一些与教育相关的类别： undergraduate ， graduate和phd 。 然后，将它们作为类添加到目标元素。

<li class="mix-target undergraduate">
  <a href="#">Economics<span>(U)</span></a>
</li>

<li class="mix-target graduate">
  <a href="#">Pharmacology<span>(G)</span></a>
</li>

接下来，我们定义将显示过滤器项的单击处理程序。 我们将使用<button>元素执行此操作。 我们向它们各自添加filter-btn类和data-filter属性。 自定义属性的值应与已应用于目标元素的类名称匹配。 关键字all和none也是可能的值。

<button class="filter-btn" data-filter=".undergraduate">Undergraduate</button>
<button class="filter-btn" data-filter=".graduate">Graduate</button>

3.  调用

mixitup('#mix-wrapper', {
  load: {
    sort: 'order:asc' /* default:asc */
  },
  animation: {
    effects: 'fade rotateZ(-180deg)', /* fade scale */ 
    duration: 700 /* 600 */
  },
  classNames: {
    block: 'programs', /* mixitup */
    elementFilter: 'filter-btn', /* control */
    elementSort: 'sort-btn' /* control */
  },
  selectors: {
    target: '.mix-target' /* .mix */
  }
});

相关链接

官网地址 ：https://www.kunkalabs.com/mixitup/

GitHub 地址 ：  https://github.com/patrickkunka/mixitup

演示地址 ：https://wow.techbrood.com/fiddle/12318