分类筛选图片画廊动画问题：图片无法平滑排列求助

问题背景 #

我正在开发一个支持按land/sea/animals分类筛选的图片画廊，预期交互效果：

• 用户点击分类选项后，非目标分类图片向下移动并逐渐消失，仅展示对应分类图片
• 切换分类时，之前隐藏的图片从下方向上回归原位置

目前已实现图片进出动画且结束后可保持隐藏，但存在两个核心问题：

• 筛选后保留的图片直接“跳跃”到目标排列位置，无平滑滑动归位效果
• 非目标图片消失后，剩余图片无法平滑左对齐排列

问题原因分析 #

1. Bootstrap网格即时重排：非目标元素被设置display: none后，.row会立刻重新计算剩余列的位置，导致跳跃，没有过渡效果
2. display属性无法动画过渡：CSS动画不支持display属性的平滑变化，display: none会立刻生效，打断动画流程
3. 静态定位导致位移动画无效：.photo-item默认是position: static，top属性对其不生效，进出动画的上下移动实际未正确触发
4. 容器高度无过渡：.row的高度变化没有过渡效果，元素消失后容器高度突然塌陷，加剧跳跃感

解决方案 #

1. 修改CSS，修复动画与布局过渡 #

.line-list li {
  display: inline-block;
  margin: 10px;
  cursor: pointer;
}

.active-filter {
  color: blue;
}

/* 给图片项设置相对定位，让transform位移生效 */
.photo-item {
  position: relative;
  transition: all 0.5s ease; /* 元素尺寸变化的平滑过渡 */
}

/* 图片行容器添加过渡，高度变化更自然 */
.photo-row {
  transition: height 0.8s ease;
}

@keyframes go-out {
  0% {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    height: auto;
    padding: 1rem; /* 对应Bootstrap的p-4类 */
    margin: 0;
  }
  100% {
    transform: translateY(600px);
    opacity: 0;
    visibility: hidden;
    height: 0;
    padding: 0;
    margin: 0;
  }
}

@keyframes go-in {
  0% {
    transform: translateY(600px);
    opacity: 0;
    visibility: hidden;
    height: 0;
    padding: 0;
    margin: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    height: auto;
    padding: 1rem;
  }
}

.photo-out {
  animation: go-out 1.2s forwards;
}

.photo-in {
  animation: go-in 1.2s forwards;
}

/* 动画结束后保持元素隐藏状态 */
.hidden {
  visibility: hidden;
  height: 0;
  padding: 0;
  margin: 0;
  opacity: 0;
}

2. 修改HTML，给图片行添加类名 #

给包含图片的.row添加photo-row类，用于设置容器过渡：

<div class='row photo-row'>
  <!-- 图片项保持不变 -->
</div>

3. 修改JS，优化动画逻辑 #

const filterContainer = document.querySelector('.data-filters');
const photoItems = document.querySelectorAll('.photo-item');

// 监听动画结束事件，给完成退出动画的元素添加隐藏类
photoItems.forEach(item => {
  item.addEventListener('animationend', (e) => {
    if (e.animationName === 'go-out') {
      item.classList.add('hidden');
    }
  });
});

filterContainer.addEventListener('click', (event) => {
  // 仅处理分类选项的点击
  if (!event.target.matches('li')) return;

  filterContainer.querySelector('.active-filter').classList.remove('active-filter');
  event.target.classList.add('active-filter');

  const filter = event.target.getAttribute('data-filter');

  photoItems.forEach((item) => {
    // 先清除所有动画类和隐藏类，避免冲突
    item.classList.remove('photo-out', 'photo-in', 'hidden');
    
    if (item.getAttribute('data-filter') === filter || filter === 'all') {
      item.classList.add('photo-in');
    } else {
      item.classList.add('photo-out');
    }
  });
});

关键改动说明 #

• 用transform替代top：transform属于合成层动画，不会触发页面重排，性能更优，位移更流畅
• 容器高度过渡：给.photo-row添加高度过渡，让容器随元素隐藏/显示平滑变化，避免突然塌陷
• 动画结束后处理：通过animationend事件给退出动画完成的元素添加hidden类，保持隐藏状态同时不影响布局过渡
• 移除无效display属性：改用visibility、height、padding控制元素隐藏，这些属性支持过渡，确保动画完整执行

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