使用 isotope 时，若为 `.item` 元素全局设置了 css `transition`，会导致排序或过滤过程中出现视觉上的轻微抖动（wiggle），这是 isotope 已知的布局冲突问题；移除 `.item` 上的通用 transition 并仅对需动画的子属性单独声明，即可彻底解决。
在基于 Isotope 构建的动态网格布局中，开发者常希望为卡片（.item）添加平滑过渡效果，例如 hover 时的背景变化、边框渐变或阴影增强。但若直接在 .item 选择器上声明 transition: all .5s ease-out 或类似通用过渡规则，就会与 Isotope 的内部布局重排机制产生冲突——尤其在启用 fitRows、masonry 等 layoutMode 时，Isotope 依赖精确的 dom 位置计算与 CSS transform 动画完成布局切换；而全局 transition 会干扰其对 left/top/transform 等关键属性的控制权，导致元素在重排瞬间出现微小位移、闪烁或“抖动”（wiggle），严重影响用户体验。
✅ 正确做法是：将 transition 从 .item 中完全移除，仅保留在真正需要动画的子元素或具体属性上。例如：
/* ❌ 错误：全局 transition 干扰 Isotope 布局 */ .item { transition: all .5s ease-out; /* ← 删除这一行 */ } /* ✅ 正确：精细化控制过渡目标 */ .item { width: 250px; min-height: 300px; margin: 20px; padding: 15px; background: rgba(0, 0, 0, .25); border-radius: 5px; box-sizing: border-box; /* 不再设置 transition */ } /* 仅对 img 悬停效果启用过渡 */ .item img { display: block; margin: 5px auto; width: 175px; height: 175px; border-radius: 50%; border: 3px solid transparent; /* 精确指定需过渡的属性，避免影响布局 */ transition: border-color .5s ease-out, Filter .5s ease-out; filter: grayscale(25%); } .item img:hover { border-color: firebrick; filter: grayscale(0%); } /* 链接等交互元素也可单独过渡 */ .item a { color: firebrick; transition: color .3s ease; } .item a:hover { color: #BD64A8; }⚠️ 注意事项：
- 不要使用 transition: all：它会隐式监听所有可动画属性（包括 left、top、transform），而这正是 Isotope 内部用于布局动画的核心属性，二者竞争将导致渲染异常。
- 避免在 .item 上设置 will-change: transform：该声明可能触发强制图层提升，反而加剧抖动，除非你明确控制 transform 动画且已禁用全局 transition。
- 确保 imagesLoaded() 正确调用：如示例代码所示，务必在图片加载完成后触发 isotope(‘layout’)，否则未加载完成的图片高度不确定，也会引发后续布局跳变。
- 验证 JavaScript 初始化逻辑：注意你原代码中存在重复调用 $grid.isotope({ sortBy: … }) 的问题（如连续调用 name/age/original-order），这会触发多次无意义重排。应仅保留初始配置，排序逻辑交由事件监听统一处理。
? 总结：Isotope 的“抖动”并非 bug，而是 CSS 过渡与 JavaScript 布局引擎协同失衡的表现。遵循“最小化过渡作用域”原则——即只对视觉反馈强、非布局相关的属性（如 color、border-color、filter、opacity）启用 transition，并严格避免在网格项容器（.item）上设置任何影响几何属性的过渡规则——即可获得丝滑、稳定的排序与过滤体验。