求助：实现带动画的网格卡片分类筛选功能的JavaScript代码

原代码问题分析 #

1. 元素选择不匹配：JS中使用#all-option等ID选择器，但HTML里的筛选按钮未设置对应ID，导致事件无法绑定。
2. 容器未恢复显示：卡片容器初始设为display:none，但点击筛选按钮时未将其改为可见，卡片即使设置为block也无法显示。
3. 缺少动画支持：直接修改display属性无法触发CSS过渡动画，需改用支持过渡的属性实现效果。
4. 代码冗余：每个按钮单独绑定事件，可通过统一逻辑简化代码。

完整实现代码 #

修复后的HTML结构

<!-- 筛选按钮容器 -->
<div class="blocks" id="button-container">
  <button class="filter-btn" data-filter="all">All</button>
  <button class="filter-btn" data-filter="projetos">Projetos</button>
  <button class="filter-btn" data-filter="certificados">Certificados</button>
  <button class="filter-btn" data-filter="apis">APIs</button>
</div>

<!-- 卡片网格容器 -->
<div id="cards-container" class="cards-grid">
  <!-- 示例卡片：每个卡片包含all和对应分类类名 -->
  <div class="card all projetos">项目卡片1</div>
  <div class="card all projetos">项目卡片2</div>
  <div class="card all certificados">证书卡片1</div>
  <div class="card all certificados">证书卡片2</div>
  <div class="card all apis">API卡片1</div>
  <!-- 剩余8个卡片按需求添加类名即可 -->
</div>

CSS样式（含网格布局与动画）

/* 卡片网格布局 */
.cards-grid {
  display: none; /* 初始隐藏 */
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

/* 卡片基础样式 */
.card {
  padding: 20px;
  border: 1px solid #eee;
  border-radius: 8px;
  transition: all 0.3s ease;
  opacity: 0; /* 初始透明状态 */
  transform: translateY(20px); /* 初始下移状态 */
}

/* 卡片显示状态（触发动画） */
.card.show {
  opacity: 1;
  transform: translateY(0);
}

/* 筛选按钮样式（可选） */
.filter-btn {
  padding: 8px 16px;
  margin-right: 10px;
  border: none;
  border-radius: 4px;
  background: #f0f0f0;
  cursor: pointer;
}

.filter-btn.active {
  background: #2196F3;
  color: white;
}

JavaScript逻辑

const filterButtons = document.querySelectorAll('.filter-btn');
const cardsContainer = document.getElementById('cards-container');
const allCards = document.querySelectorAll('.card');

// 筛选核心函数
function filterCards(filterType) {
  // 先显示网格容器
  cardsContainer.style.display = 'grid';
  
  allCards.forEach(card => {
    if (filterType === 'all' || card.classList.contains(filterType)) {
      card.classList.add('show');
    } else {
      card.classList.remove('show');
    }
  });
  
  // 标记当前激活的筛选按钮
  filterButtons.forEach(btn => {
    btn.classList.toggle('active', btn.dataset.filter === filterType);
  });
}

// 绑定所有按钮的点击事件
filterButtons.forEach(btn => {
  btn.addEventListener('click', () => {
    filterCards(btn.dataset.filter);
  });
});

关键修改说明 #

1. 按钮结构优化：统一使用<button>标签，通过data-filter属性存储分类值，避免冗余ID，支持批量事件处理。
2. 动画实现：用opacity和transform替代display控制显示隐藏，配合CSStransition实现淡入+上移动画效果。
3. 容器显示逻辑：点击筛选按钮时先将容器设为grid，确保卡片在网格布局中正确排列。
4. 代码简化：通过forEach批量处理卡片和按钮，减少重复代码，提升可维护性。

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