README

MixItUp 是一个高性能、无依赖的 DOM 动画操作库，它赋予您通过美丽的动画过滤、排序、添加和删除 DOM 元素的强大功能。

MixItUp 与现有的 HTML 和 CSS 兼容良好，是响应式布局的绝佳选择，并且与内联流、百分比、媒体查询、flexbox 等兼容。

有关实时沙盒、完整文档、教程等，请访问 kunkalabs.com/mixitup。

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

许可

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

文档

浏览器支持

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

Chrome 16+
Firefox 16+
Safari 6.2+
Yandex 14+
Edge 13+
IE 10+（具有动画），IE 8-9（无动画）

入门

通常，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 进行筛选](https://www.kunkalabs.com/tutorials/filtering-with-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 进行排序](https://www.kunkalabs.com/tutorials/sorting-with-mixitup/)

设置容器样式

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

进一步阅读：[MixItUp 网格布局](https://www.kunkalabs.com/tutorials/mixitup-grid-layouts/)

加载 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');

进一步阅读：搅拌器API方法

构建现代JavaScript应用程序？

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

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

patrickkunka / mixitup

维护者

详细信息