JavaScript与CSS动画：实现平滑顺序淡入淡出效果并解决显示冲突

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

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

function changeDisplay(sections) {
  for (let i = 0; i < sections.length; i++) {
    if (window.getComputedStyle(sections[i]).display === 'grid') {
      // 假设当前元素是 sections[i]，下一个元素是 sections[0] (循环切换)
      sections[i].style.animation = 'fade-out 500ms forwards'; // 添加 forwards 保持最终状态
      sections[i].style.display = 'none'; // 问题所在：立即设置 display: none
      sections[0].style.display = 'grid';
      sections[0].style.animation = 'fade-in 500ms forwards';
      break;
    }
  }
}

function changeDisplay(sections) {
  for (let i = 0; i < sections.length; i++) {
    if (window.getComputedStyle(sections[i]).display === 'grid') {
      const currentSection = sections[i];
      const nextSection = (i + 1 === sections.length) ? sections[0] : sections[i + 1]; // 修正下一个元素的获取逻辑

      currentSection.style.animation = 'fade-out 500ms forwards'; // 应用淡出动画

      // 延迟执行 display: none 和淡入动画
      setTimeout(() => {
        currentSection.style.display = 'none'; // 淡出动画结束后隐藏当前元素
        currentSection.style.animation = ''; // 清除动画，避免影响后续操作或内存泄漏

        nextSection.style.display = 'grid'; // 显示下一个元素
        nextSection.style.animation = 'fade-in 500ms forwards'; // 应用淡入动画
      }, 500); // 延迟时间应与淡出动画的持续时间一致

      break;
    }
  }
}

function changeDisplay(sections) {
  for (let i = 0; i < sections.length; i++) {
    if (window.getComputedStyle(sections[i]).display === 'grid') {
      const currentSection = sections[i];
      const nextSection = (i + 1 === sections.length) ? sections[0] : sections[i + 1];

      // 定义动画结束时的回调函数
      const handleAnimationEnd = () => {
        currentSection.style.display = 'none';
        currentSection.style.animation = ''; // 清除动画
        currentSection.removeEventListener('animationend', handleAnimationEnd); // 移除事件监听器

        nextSection.style.display = 'grid';
        nextSection.style.animation = 'fade-in 500ms forwards';
      };

      // 监听当前元素的动画结束事件
      currentSection.addEventListener('animationend', handleAnimationEnd);

      // 应用淡出动画
      currentSection.style.animation = 'fade-out 500ms forwards';

      break;
    }
  }
}

.section {
  transition: opacity 500ms ease-in-out; /* 定义 opacity 的过渡效果 */
  opacity: 0; /* 默认隐藏 */
  /* 其他样式，如 display: none; 在需要显示时切换为 display: grid/block */
}

.section.active {
  opacity: 1; /* 激活时显示 */
  /* display: grid; 当 opacity 从 0 到 1 变化时，需要确保元素是可见的 */
}

function changeDisplayWithTransition(sections) {
  for (let i = 0; i < sections.length; i++) {
    if (sections[i].classList.contains('active')) { // 假设通过 active 类控制显示
      const currentSection = sections[i];
      const nextSection = (i + 1 === sections.length) ? sections[0] : sections[i + 1];

      // 1. 淡出当前元素
      currentSection.style.opacity = '0'; // 触发淡出过渡

      // 2. 监听淡出过渡结束
      const handleTransitionEnd = () => {
        currentSection.style.display = 'none'; // 过渡结束后隐藏
        currentSection.classList.remove('active');
        currentSection.removeEventListener('transitionend', handleTransitionEnd);

        // 3. 显示下一个元素并淡入
        nextSection.style.display = 'grid'; // 先设置 display，确保元素在 DOM 中
        // 强制浏览器重绘以确保 display 更改生效，然后再应用 opacity 变化
        // 这可以通过访问元素的某个属性（如 offsetWidth）来实现
        void nextSection.offsetWidth; 
        nextSection.style.opacity = '1'; // 触发淡入过渡
        nextSection.classList.add('active');
      };

      currentSection.addEventListener('transitionend', handleTransitionEnd);

      break;
    }
  }
}