CSS网格淡出/新Div淡入：返回时网格闪显问题求助

问题根源 #

返回时网格闪显，是因为resetAccordion函数中移除hide-element（取消display:none）时，原网格会立刻以opacity:1的状态显示，而你给fadeIn动画设置了1秒延迟，导致动画开始前的1秒内，网格完全可见，从而出现闪显。

修复方案 #

调整动画时序和元素初始状态，让网格显示时先保持透明，再执行淡入动画，同时优化display属性的切换时机：

1. 修改CSS：
   • 移除fadeIn动画的1秒延迟，让动画添加后立即执行
   • 给网格添加快速过渡的初始透明状态，避免闪显
2. 调整JS逻辑：
   • 同步网格显示与动画的触发时机，移除隐藏类的同时添加淡入动画
   • 简化定时器逻辑，让元素切换更连贯

修改后的代码 #

JavaScript

function showAccordion(){
    const grid = document.getElementById('faq-support-boxes-grid');
    const accordion = document.getElementById('accordion-container');
    
    grid?.classList.add('fadeOut');
    setTimeout(() => {
        grid?.classList.add('hide-element');
        accordion?.classList.remove('hide-element');
        accordion?.classList.add('fadeIn');
    }, 1000);
}

function resetAccordion(){
    const accordion = document.getElementById('accordion-container');
    const grid = document.getElementById('faq-support-boxes-grid');
    
    accordion?.classList.remove('fadeIn');
    accordion?.classList.add('fadeOut');
    setTimeout(() => {
        accordion?.classList.add('hide-element');
        // 同步移除隐藏类与添加淡入动画，避免闪显
        grid?.classList.remove('hide-element');
        grid?.classList.remove('fadeOut');
        grid?.classList.add('fadeIn');
    }, 1000);
}

CSS

.faq-support-boxes-grid {
    background-color: #fff;
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    opacity: 1;
    transition: opacity 0.1s; /* 快速过渡初始透明状态 */

    .feature-box{
        background-color:#a6a6a6;
        text-align:center;
        img{
            display: inline;
            width:40%;
        }
    }
}

.fadeOut {
    animation: fadeOutTop 1s ease-out forwards;
}

.fadeIn {
    animation: fadeInTop 1s ease-out forwards;
    /* 移除原有的1秒延迟 */
}

.accordion-container{
    transform: translateY(-30rem);
    opacity: 0;
    display: none;
}

.accordion-back{
    transform: translateY(-10%);
    display: block;
    color:#325390 !important;
}

.show-element{
    display: block !important;
}
.hide-element{
    display: none !important;
}

@keyframes fadeOutTop{
    0%{
        opacity: 1;
        transform: translate(0);
    }
    100%{
        opacity: 0;
        transform: translateY(-30rem);
    }
}

@keyframes fadeInTop{
    0%{
        opacity: 0;
        transform: translateY(-30rem);
    }
    100%{
        opacity: 1;
        transform: translate(0);
    }
}

HTML（保持原结构即可）

<div id="faq-support-boxes-grid" class="faq-support-boxes-grid">
   <div id="feature-box-about" onclick="showAccordion()" class="feature-box" tabindex="1">
      <img src="https://www.adaptivewfs.com/wp-content/uploads/2020/07/logo-placeholder-image.png" >
      <h3>Heading 1</h3>
      <p>some text</p>
   </div>
   <div id="feature-box-security" onclick="showAccordion()" class="feature-box" tabindex="2">
      <img src="https://www.adaptivewfs.com/wp-content/uploads/2020/07/logo-placeholder-image.png" >
      <h3>Heading  2</h3>
      <p>some text</p>
   </div>
   <div id="feature-box-using" class="feature-box" tabindex="3">
      <img src="https://www.adaptivewfs.com/wp-content/uploads/2020/07/logo-placeholder-image.png" >
      <h3>Heading 3</h3>
      <p>some text</p>
   </div>
   <div id="feature-box-account" class="feature-box" tabindex="4">
      <img src="https://www.adaptivewfs.com/wp-content/uploads/2020/07/logo-placeholder-image.png" >
      <h3>Heading 4</h3>
      <p>some text</p>
   </div>
   <div id="feature-box-billing" class="feature-box" tabindex="5">
      <img src="https://www.adaptivewfs.com/wp-content/uploads/2020/07/logo-placeholder-image.png" >
      <h3>Heading 5</h3>
      <p>some text</p>
   </div>
   <div id="feature-box-support" class="feature-box" tabindex="6">
      <img src="https://www.adaptivewfs.com/wp-content/uploads/2020/07/logo-placeholder-image.png" >
      <h3>Heading 6</h3>
      <p>some text</p>
   </div>
</div>
<div id="accordion-container" class="accordion-container">
   <button class="accordion-back btn btn-secondary" onclick="resetAccordion()">
   Back
   </button>
</div>

额外优化建议 #

• 可用visibility: hidden替代display:none隐藏元素，保留布局空间，避免切换时的布局跳动
• 给动画元素添加will-change: opacity, transform，让浏览器提前优化动画性能
• 函数内缓存DOM元素引用，避免重复获取，提升性能

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