如何修复HTML/CSS/jQuery Flexbox图片画廊的卡顿动画？

• 只动画transform和opacity属性
  你之前操作width、height、margin这些属性会触发浏览器的重排（reflow）和重绘（repaint），这是卡顿的核心原因。transform和opacity是少数仅触发合成（composite）的属性，浏览器可借助GPU加速，完全不会产生卡顿。
  具体实现：给需要隐藏的图片设置transform: scale(0)、opacity: 0，同时添加pointer-events: none避免它响应点击事件，再配合transition: transform 0.3s ease, opacity 0.3s ease实现平滑过渡。显示时将属性恢复为scale(1)、opacity: 1，pointer-events设回auto。

• 优化DOM操作逻辑
  别在筛选循环里频繁操作DOM节点，先一次性获取所有画廊元素集合，再批量修改样式。示例代码：

  // 优化前：逐个操作DOM
  $('.gallery-item').each(function() {
    if (符合筛选条件) {
      $(this).css(...)
    } else {
      $(this).css(...)
    }
  })
  // 优化后：批量操作
  const $galleryItems = $('.gallery-item');
  $galleryItems.filter('.匹配筛选条件的类').css({
    transform: 'scale(1)',
    opacity: 1,
    pointerEvents: 'auto'
  });
  $galleryItems.not('.匹配筛选条件的类').css({
    transform: 'scale(0)',
    opacity: 0,
    pointerEvents: 'none'
  });
  

  减少DOM操作次数能避免浏览器频繁计算布局，提升流畅度。

• 提前告知浏览器动画意图
  给画廊元素添加will-change属性，让浏览器提前为动画分配GPU资源：

  .gallery-item {
    will-change: transform, opacity;
  }
  

  注意仅给确实需要动画的元素添加，避免滥用导致GPU资源占用过高。

• 动画结束后处理隐藏元素
  当元素缩放至0的动画完成后，再设置visibility: hidden彻底隐藏它（别在动画过程中修改display: none，会直接打断动画）。可借助transitionend事件实现：

  // 隐藏元素的逻辑
  $galleryItems.not('.匹配筛选条件的类')
    .css({transform: 'scale(0)', opacity: 0, pointerEvents: 'none'})
    .one('transitionend', function() {
      $(this).css('visibility', 'hidden');
    });
  // 显示元素的逻辑
  $galleryItems.filter('.匹配筛选条件的类')
    .css('visibility', 'visible')
    .css({transform: 'scale(1)', opacity: 1, pointerEvents: 'auto'});
  

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