MixItUp 3

MixItUp 是一个用于动画 DOM 操作的高性能、无依赖库，使您能够过滤、排序、添加和删除带有漂亮动画的 DOM 元素。

MixItUp 与您现有的 HTML 和 CSS 配合得很好，使其成为响应式布局的绝佳选择，并与内联流、百分比、媒体查询、flexbox 等兼容。

如需实时沙箱、完整文档、教程等，请访问kunkalabs.com/mixitup。

从 MixItUp 2 迁移？查看MixItUp 3 迁移指南。

许可

MixItUp 是开源的，可免费用于非商业、教育和非营利用途。要在商业项目中使用， 需要商业许可证 。有关许可信息和常见问题解答，请参阅MixItUp 许可页面。

文档

• 工厂功能
• 配置对象
• 混合器 API 方法
• 状态对象
• 混音器事件

浏览器支持

MixItUp 3 已经过与以下浏览器的兼容性测试。

• Chrome 16+
• Firefox 16+
• Safari 6.2+
• Yandex 14+
• Edge 13+
• IE 10+ (with animations), IE 8-9 (no animations)

入门

最常见的是，MixItUp 应用于“目标”元素的 “容器” ，它可以是项目组合、博客文章列表、产品选择或任何类型的 UI，其中过滤和/或排序将是有利的.

要开始，请按照以下简单步骤操作：

构建容器

默认情况下，MixItUp 将在容器中查询与选择器匹配的目标 '.mix'。

<div class="container">
    <div class="mix category-a" data-order="1"></div>
    <div class="mix category-b" data-order="2"></div>
    <div class="mix category-b category-c" data-order="3"></div>
    <div class="mix category-a category-d" data-order="4"></div>
</div>

可以使用任何有效的选择器过滤目标，例如 '.category-a'，并通过可选的自定义数据属性进行排序，例如 'data-order'。

进一步阅读：标记 MixItUp 容器

建筑控制

过滤和排序发生的一种方式是单击控件时。您可以使用任何可点击元素作为控件，但 <button type="button">建议使用可访问性。

过滤器控件

过滤器控件根据 data-filter属性的存在进行查询，其值必须是 'all','none'或有效的选择器字符串，例如 '.category-a'。

<button type="button" data-filter="all">All</button>
<button type="button" data-filter=".category-a">Category A</button>
<button type="button" data-filter=".category-b">Category B</button>
<button type="button" data-filter=".category-c">Category C</button>

进一步阅读：使用 MixItUp 进行过滤

排序控件

排序控件根据 data-sort属性的存在进行查询，其值采用“排序字符串”的形式，该字符串由要排序的属性名称组成，后跟可选的以冒号分隔的排序顺序，例如 'order', 'order:asc', 'order:desc'。

<button type="button" data-sort="order:asc">Ascending</button>
<button type="button" data-sort="order:descending">Descending</button>
<button type="button" data-sort="random">Random</button>

值 'default'和 'random'也是有效的，'default'参考了混合器实例化时 DOM 中目标元素的原始顺序。

进一步阅读：使用 MixItUp 进行排序

样式化容器

虽然 MixItUp 可以添加到任何现有的 CSS 布局之上，但出于多种原因，在处理基于网格的设计时，我们强烈建议使用内联块或基于 flexbox 的样式而不是浮动和传统的网格框架。

进一步阅读：MixItUp 网格布局

加载 MixItUp

首先，使用项目的首选方法加载 MixItUp JavaScript 库。

脚本标签

在您的项目中加载 MixItUp 的最简单方法是通过页面上 <script>结束标记之前的标记将其包含在内 </body>。

        ...

        <script src="/path/to/mixitup.min.js"></script>
    </body>
</html>

使用这种技术，MixItUp 工厂函数将通过全局变量提供 mixitup。

模块导入

如果您正在使用 Webpack、Browserify 或 RequireJS 构建模块化 JavaScript 项目，则可以使用您选择的包管理器（例如 npm、jspm、yarn）安装 MixItUp，然后将其导入项目的任何模块中。

npm install mixitup --save

// ES2015

import mixitup from 'mixitup';

// CommonJS

var mixitup = require('mixitup');

// AMD

require(['mixitup'], function(mixitup) {

});

创建混音器

使用 mixitup()可用的工厂功能，您现在可以在容器上实例化一个“混合器”以启用 MixItUp 功能。

调用工厂函数，将选择器字符串或对容器元素的引用作为第一个参数，然后将返回新实例化的混音器。

示例：使用选择器字符串实例化混音器

var mixer = mixitup('.container');

示例：使用元素引用实例化混频器

var mixer = mixitup(containerEl);

您的混音器现在可以通过它的控件（见上文）或它的 API（见混音器 API 方法）进行交互。单击控件或调用 API 方法以检查一切是否正常。

配置

如果您希望自定义混音器的功能，可以将可选的“配置对象”作为第二个参数传递给该 mixitup函数。如果没有传递配置对象，将使用默认设置。

进一步阅读：配置对象

示例：传递配置对象

var mixer = mixitup(containerEl, {
    selectors: {
        target: '.blog-item'
    },
    animation: {
        duration: 300
    }
});

使用 API

如果您希望通过其 API 与混音器进行交互，工厂函数返回的混音器引用可用于调用 API 方法。

示例：调用 API 方法

var mixer = mixitup(containerEl);

mixer.filter('.category-a');

进一步阅读：Mixer API 方法

构建现代 JavaScript 应用程序？

您可能希望使用 MixItUp 3 的新“数据集”API。Dataset 设计用于 API 驱动的 JavaScript 应用程序，可以用来代替基于 DOM 的方法，例如 .filter()、.sort()、.insert()等。使用时，插入、删除、排序和分页可以完全通过更改数据模型来实现，无需直接与 DOM 交互或查询 DOM。

进一步阅读：使用数据集 API