掌握CSS与JS协同实现平滑淡入淡出动画

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

@keyframes fade-out {
  0% { opacity: 1; }
  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'; // 问题所在：立即移除，动画不显示
      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'; // 应用淡出动画

      // 延迟500毫秒（与动画持续时间相同），等待淡出动画完成
      setTimeout(() => {
        currentSection.style.display = 'none'; // 淡出完成后隐藏当前元素
        nextSection.style.display = 'grid';   // 显示下一个元素
        nextSection.style.animation = 'fade-in 500ms forwards'; // 应用淡入动画
      }, 500); // 这里的延迟时间应与fade-out动画的持续时间一致

      break;
    }
  }
}

/* 基础样式 */
.section {
  transition: opacity 500ms ease-in-out, visibility 500ms ease-in-out;
  opacity: 0;
  visibility: hidden;
  /* 初始状态：隐藏且透明 */
  position: absolute; /* 或其他布局方式，确保不影响其他元素 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.section.active {
  opacity: 1;
  visibility: visible;
  /* 激活状态：可见且不透明 */
}

/* 针对需要完全移除的元素 */
.section.hidden {
  display: none;
}

function changeSection(sections) {
  let currentActiveIndex = -1;
  for (let i = 0; i < sections.length; i++) {
    if (sections[i].classList.contains('active')) {
      currentActiveIndex = i;
      break;
    }
  }

  if (currentActiveIndex === -1) {
    // 如果没有激活的，默认激活第一个
    sections[0].classList.add('active');
    sections[0].style.display = 'grid'; // 确保初始显示
    return;
  }

  const currentSection = sections[currentActiveIndex];
  const nextSectionIndex = (currentActiveIndex + 1) % sections.length;
  const nextSection = sections[nextSectionIndex];

  // 1. 开始淡出当前元素
  currentSection.classList.remove('active'); // 移除active，触发淡出动画

  // 2. 监听当前元素的过渡结束事件
  currentSection.addEventListener('transitionend', function handler() {
    currentSection.removeEventListener('transitionend', handler); // 移除监听器，避免重复触发

    // 淡出完成后，如果需要，可以设置display: none
    // currentSection.style.display = 'none'; // 仅在需要完全移除时使用

    // 3. 显示下一个元素并开始淡入
    nextSection.style.display = 'grid'; // 确保下一个元素在DOM中可见
    // 延迟一小段时间，确保display: grid生效，然后添加active类触发淡入
    requestAnimationFrame(() => {
      nextSection.classList.add('active'); // 添加active，触发淡入动画
    });

    // 4. (可选) 如果你需要在淡入完成后隐藏上一个元素，可以这样做：
    // currentSection.classList.add('hidden'); // 如果需要完全移除，添加一个display: none的类
    // 注意：这里的'hidden'类应只包含display: none，且不应影响opacity和visibility过渡
  });
}

// 示例调用 (假设 sections 是一个包含所有section元素的NodeList或数组)
// const sections = document.querySelectorAll('.section');
// changeSection(sections);

.section {
  transition: opacity 0.5s ease-in-out; /* 只过渡opacity */
  opacity: 0;
  visibility: hidden; /* 默认隐藏 */
  position: absolute; /* 确保不影响布局 */
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

.section.visible {
  opacity: 1;
  visibility: visible; /* 设置为可见 */
}

function changeSectionSmoothly(sections) {
  let currentActiveSection = document.querySelector('.section.visible');
  let nextSection;

  if (!currentActiveSection) {
    // 初始状态，显示第一个
    nextSection = sections[0];
    nextSection.classList.add('visible');
    return;
  }

  const currentIndex = Array.from(sections).indexOf(currentActiveSection);
  const nextIndex = (currentIndex + 1) % sections.length;
  nextSection = sections[nextIndex];

  // 1. 开始淡出当前元素
  currentActiveSection.classList.remove('visible');

  // 2. 监听当前元素的过渡结束事件
  currentActiveSection.addEventListener('transitionend', function handler(event) {
    // 确保是opacity属性的过渡结束
    if (event.propertyName === 'opacity') {
      currentActiveSection.removeEventListener('transitionend', handler);

      // 3. 确保下一个元素可见并开始淡入
      // 注意：这里不需要设置display: grid，因为元素始终在DOM中，只是通过visibility和opacity控制显示
      nextSection.classList.add('visible');
    }
  });
}