如何解决Isotope过滤器与Bootstrap 3.3.7手风琴的滑动BUG？

你遇到的这个滑动延迟BUG，核心原因是代码中额外的slideDown调用和Bootstrap手风琴自带的滑动动画发生了冲突。Bootstrap的collapse组件本身已经内置了滑动展开/收起的动画效果，你再手动调用slideDown会让元素执行两次动画，从而出现首个项先动、后续项延迟的异常表现。

下面是修复后的完整代码，我会逐一说明修改点：

// 初始化Isotope
var $grid = $('.portfolio-grid').isotope({
  itemSelector: '.portfolio-item',
  layoutMode: 'vertical',
  hiddenStyle: { opacity: 0 },
  visibleStyle: { opacity: 1 },
  transitionDuration: '0.3s' // 新增：和Bootstrap手风琴的动画时长匹配，让布局过渡更平滑
});

// 手风琴展开/收起完成后，触发Isotope重新计算布局
$grid.on('shown.bs.collapse hidden.bs.collapse', function() {
  // 移除了多余的slideDown调用，避免动画冲突
  $grid.isotope('layout');
});

// 点击按钮过滤项目
$('.button-group').on('click', 'button', function() {
  var filterValue = $(this).attr('data-filter');
  $grid.isotope({ filter: filterValue });
});

// 切换按钮的选中状态
$('.button-group').each(function(i, buttonGroup) {
  var $buttonGroup = $(buttonGroup);
  $buttonGroup.on('click', 'button', function() {
    $buttonGroup.find('.is-checked').removeClass('is-checked');
    $(this).addClass('is-checked');
  });
});

关键修改说明： #

1. 移除多余的slideDown：Bootstrap的shown.bs.collapse和hidden.bs.collapse事件本身就是在动画完成后触发的，不需要再手动调用slideDown，这是导致BUG的核心原因。
2. 匹配动画时长：新增transitionDuration: '0.3s'配置，和Bootstrap手风琴默认的动画时长保持一致，让Isotope的布局更新和手风琴的滑动动画衔接更自然。
3. 简化布局触发逻辑：直接在事件回调中调用$grid.isotope('layout')，确保手风琴尺寸变化后，Isotope能及时重新计算所有项目的位置。

另外，建议你检查一下手风琴的HTML结构，确保每个手风琴面板都正确包含在.portfolio-item元素内，这样Isotope才能准确识别元素的尺寸变化。

内容的提问来源于stack exchange，提问作者Mamunur Rashid