Filterizr 自定义动画特效用 CSS3 过渡打造惊艳的过滤效果【免费下载链接】filterizr:sparkles: Filterizr is a JavaScript library that sorts, shuffles and filters responsive galleries using CSS3 transitions :sparkles:项目地址: https://gitcode.com/gh_mirrors/fi/filterizrFilterizr 是一款轻量级、零依赖的 JavaScript 过滤动画库它通过 CSS3 过渡让响应式图片画廊的过滤、排序与随机重排变得丝滑流畅。无论你是前端新手还是资深开发者都能用 Filterizr 在几分钟内为作品集、电商列表或相册页面加上极具视觉冲击力的过滤动画效果。本文将从零开始教你玩转 Filterizr 的自定义动画配置。Filterizr 是什么为什么过滤动画如此重要用户浏览图片画廊时点一下分类按钮内容瞬间消失又出现体验会非常生硬。而 Filterizr 的思路是让元素通过 CSS3 过渡平滑地淡入淡出、位移缩放视觉上像是一场编排好的演出。官方对它的定位是用 CSS3 过渡对响应式画廊进行排序、洗牌和过滤的 JavaScript 库。它支持纯 JavaScript 使用也可以作为 jQuery 插件加载核心源码由 TypeScript 编写无任何第三方依赖移动端表现优秀兼容 IE11 及所有现代浏览器。动画的核心秘密filterInCss 与 filterOutCssFilterizr 自定义动画的精髓在于两个配置项——元素过滤进来和过滤出去时应用的样式。默认值定义在 defaultOptions.ts 中filterInCss默认opacity: 1、transform: scale(1)表示元素进场时的最终状态filterOutCss默认opacity: 0、transform: scale(0.5)表示元素离场时的状态你完全可以把这两组值改成你想要的任意 CSS 变换例如让元素离场时向左滑出并旋转进场时从下方弹入。动画的每一帧都由浏览器原生 CSS3 过渡驱动性能远优于 JavaScript 逐帧操作。最快配置方法3 步让画廊动起来首先通过 npm 或 yarn 安装npm install filterizr也可以在项目中直接加载 dist 目录下的vanilla.filterizr.min.js全局变量方式或jquery.filterizr.min.jsjQuery 插件方式。如果想研究源码可以 clone 仓库git clone https://gitcode.com/gh_mirrors/fi/filterizr接着在 HTML 中准备容器和条目每个条目通过data-category声明所属分类div classfiltr-container div classfiltr-item>const filterizr new Filterizr(.filtr-container, { animationDuration: 0.6, easing: ease-in-out, });默认情况下带有data-filter属性的控制按钮会自动绑定过滤行为无需额外写事件监听。自定义动画的 5 个实用技巧1. 调整动画时长与缓动曲线animationDuration控制动画秒数easing支持所有标准 CSS 缓动函数如ease-in、ease-out、cubic-bezier(...)。缓动值会在 FilterizrOptions.ts 中做合法性校验。2. 用延迟制造波浪式进场设置delay: 0.1并搭配delayMode可选progressive逐个递增或alternate交错递增。这让元素像波浪一样依次出现画廊瞬间有了呼吸感。3. 编写自定义进出场样式将filterOutCss改为横向位移加旋转配合filterInCss的放大回弹即可获得接近苹果官网的过渡质感。元素离场后会自动获得filteredOut类方便你通过 CSS 做补充处理见 FilterItem.ts。4. 一键切换 6 种布局Filterizr 内置了 多种布局算法sameSize、sameWidth、sameHeight、packed瀑布流、horizontal、vertical。用layout: packed即可获得瀑布流效果配合过滤动画堪称作品集标配。5. 组合排序、随机与搜索除了过滤Filterizr 还提供shuffle()随机洗牌、sort()按属性排序、search()关键词搜索甚至支持多选过滤toggleFilter与 AND/OR 逻辑。一个画廊同时满足筛选、搜索、排序三类交互可玩性极强。动画与回调掌控每个时间节点通过callbacks配置你可以在onFilteringStart、onFilteringEnd、onShufflingStart、onSortingEnd等节点挂载自定义逻辑例如在过滤开始时显示加载提示、结束时更新统计数字。回调事件的绑定与触发在 Filterizr.ts 的 render 流程中完成逻辑清晰、易于扩展。性能优化与浏览器兼容建议Filterizr 只操作transform和opacity这类合成属性动画在 GPU 上执行即便上百个条目同时变换也依然流畅。它还在图片加载完成后再执行首次渲染通过 imagesLoaded 机制避免布局跳动。窗口 resize 时会自动防抖重排移动端体验同样出色。总结Filterizr 用最简洁的 API 封装了复杂的布局计算与动画编排让你专注于业务本身。从默认的缩放淡入到自定义的位移旋转再到 6 种布局的任意组合这个零依赖的库足以满足绝大多数过滤动画场景。如果你正为画廊交互发愁不妨从配置filterInCss和filterOutCss开始亲手打造属于你自己的惊艳过滤效果。【免费下载链接】filterizr:sparkles: Filterizr is a JavaScript library that sorts, shuffles and filters responsive galleries using CSS3 transitions :sparkles:项目地址: https://gitcode.com/gh_mirrors/fi/filterizr创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考