卡片过滤隐藏：替代display:none/position:absolute且保留过渡的方案

一、延迟设置display: none（最稳妥的方案） #

这个思路完全可行，核心是先让卡片完成过渡动画，再移除它在文档流中的占位：

1. CSS定义过渡效果：保留isVisible类逻辑，给卡片设置过渡属性（比如透明度、缩放）

   .card {
     transition: opacity 0.3s ease, transform 0.3s ease;
     opacity: 1;
     transform: scale(1);
     /* 根据你的布局设置display，比如grid-item或block */
     display: grid;
   }
   .card:not(.isVisible) {
     opacity: 0;
     transform: scale(0.9);
   }
   

2. JS控制时序：移除isVisible类后，延迟和过渡时长一致的时间，再设置display: none；恢复显示时，先重置display再添加类

   const TRANSITION_DURATION = 300; // 和CSS过渡时长保持一致
   
   function filterCards(selectedCat) {
     document.querySelectorAll('.card').forEach(card => {
       const isMatch = card.dataset.category === selectedCat || selectedCat === 'all';
       
       if (isMatch) {
         // 先恢复display，再触发显示动画
         card.style.display = ''; // 重置为CSS默认值
         setTimeout(() => card.classList.add('isVisible'), 10); // 微延迟确保display生效
       } else {
         card.classList.remove('isVisible');
         // 等待动画结束后隐藏占位
         setTimeout(() => {
           // 二次判断，避免快速切换分类时出错
           if (!card.classList.contains('isVisible')) {
             card.style.display = 'none';
           }
         }, TRANSITION_DURATION);
       }
     });
   }
   

二、CSS关键帧动画方案 #

可以用关键帧实现“淡出+收缩”的效果，让卡片动画结束后不再占空间：

1. 定义关键帧动画：

   @keyframes fadeOutShrink {
     0% {
       opacity: 1;
       transform: scale(1);
       height: auto;
       padding: 1rem;
       margin: 0.5rem;
     }
     99% {
       opacity: 0;
       transform: scale(0.8);
       height: 0;
       padding: 0;
       margin: 0;
     }
     100% {
       opacity: 0;
       height: 0;
       padding: 0;
       margin: 0;
       visibility: hidden;
     }
   }
   

2. 绑定到隐藏状态：

   .card:not(.isVisible) {
     animation: fadeOutShrink 0.3s forwards;
   }
   .card.isVisible {
     animation: none;
     opacity: 1;
     transform: scale(1);
     height: auto;
     padding: 1rem;
     margin: 0.5rem;
   }
   

   注意：这种方式需要固定卡片的padding、margin，或者用JS动态计算初始值，适合布局规则的场景。

三、网格/弹性布局适配小技巧 #

如果你的卡片用Grid或Flex布局，还可以配合以下属性优化：

• 给隐藏的卡片添加pointer-events: none，避免干扰交互
• 结合visibility: hidden + height: 0 + width: 0，但需要配合过渡动画，否则会生硬跳变

避坑提醒 #

• 恢复显示时，必须先重置display属性，再添加isVisible类，否则过渡动画不会触发
• 延迟时间必须和CSS过渡/动画时长严格匹配，避免出现视觉断层
• 如果是动态高度的卡片，延迟设置display: none的方案比关键帧动画更省心

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