建站资源下载详情
为您免费提供多种建站资源下载,包括网站模板下载、前端插件下载和字体下载!您只需注册为会员即可任意下载!

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

来源:易助科技网浏览量:20收藏

简介


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


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



使用


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