实现CSS与JavaScript协同的顺序渐变动画教程

@keyframes fade-in {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes fade-out {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

function changeSection(currentSection, nextSection) {
    // 尝试开始淡出动画
    currentSection.style.animation = 'fade-out 500ms forwards'; // forwards确保动画停留在结束状态

    // 问题所在：立即设置display: none会中断淡出动画
    currentSection.style.display = 'none'; 

    // 然后显示下一个元素并开始淡入
    nextSection.style.display = 'grid'; // 或 block, flex等
    nextSection.style.animation = 'fade-in 500ms forwards';
}

function changeSectionWithTimeout(currentSection, nextSection) {
    const animationDuration = 500; // 动画持续时间，需与CSS中保持一致

    // 1. 开始当前元素的淡出动画
    currentSection.style.animation = `fade-out ${animationDuration}ms forwards`;

    // 2. 设置一个定时器，等待淡出动画完成后再进行display和下一个元素的淡入操作
    setTimeout(() => {
        currentSection.style.display = 'none'; // 淡出完成，隐藏当前元素
        currentSection.style.animation = ''; // 清除动画样式，避免影响下次使用

        // 3. 显示下一个元素并开始淡入动画
        nextSection.style.display = 'grid'; // 或 block, flex等
        nextSection.style.animation = `fade-in ${animationDuration}ms forwards`;
    }, animationDuration);
}

.section {
  transition: opacity 500ms ease-in-out; /* 定义透明度过渡效果 */
  opacity: 1; /* 默认可见状态 */
  display: grid; /* 默认显示方式 */
}

/* 隐藏状态的样式，不直接设置display: none */
.section.hidden {
  opacity: 0;
}

function changeSectionWithTransition(currentSection, nextSection) {
    // 1. 开始当前元素的淡出：通过添加类名改变opacity
    currentSection.classList.add('hidden');

    // 2. 监听当前元素的transitionend事件
    const handleTransitionEnd = () => {
        // 确保是opacity属性的过渡结束事件，防止其他属性的过渡触发
        if (event.propertyName === 'opacity') {
            // 淡出完成，将当前元素彻底隐藏
            currentSection.style.display = 'none';
            // 移除监听器，避免重复触发
            currentSection.removeEventListener('transitionend', handleTransitionEnd);

            // 3. 显示下一个元素并开始淡入
            nextSection.style.display = 'grid'; // 设置为可见
            // 强制浏览器重绘/回流，确保display:grid生效后再应用opacity过渡
            // 否则，如果display和opacity在同一微任务中改变，可能不会触发过渡
            void nextSection.offsetWidth; 
            nextSection.classList.remove('hidden'); // 移除.hidden类，使其opacity变为1
        }
    };

    currentSection.addEventListener('transitionend', handleTransitionEnd);
}

// 示例用法（假设有section1和section2两个元素）
// const section1 = document.getElementById('section1');
// const section2 = document.getElementById('section2');

// // 初始状态：section1可见，section2隐藏且opacity为0
// section1.classList.remove('hidden');
// section1.style.display = 'grid';
// section2.classList.add('hidden');
// section2.style.display = 'none';

// // 调用函数切换
// changeSectionWithTransition(section1, section2);