使用 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）上设置任何影响几何属性的过渡规则——即可获得丝滑、稳定的排序与过滤体验。
