如何根据垂直拖动的方向从底部淡入新屏幕？

<div id="container">
  <div id="current-screen">当前屏幕</div>
  <div id="next-screen" class="hidden">新屏幕</div>
</div>

#container {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

#current-screen, #next-screen {
  position: absolute;
  width: 100%;
  height: 100%;
  transition: transform 0.3s ease-in-out;
}

#next-screen.hidden {
  transform: translateY(100%);
}

document.addEventListener('DOMContentLoaded', () => {
  const container = document.getElementById('container');
  const currentScreen = document.getElementById('current-screen');
  const nextScreen = document.getElementById('next-screen');

  let startY = 0;
  let isDragging = false;

  container.addEventListener('touchstart', (e) => {
    startY = e.touches[0].clientY;
    isDragging = true;
  });

  container.addEventListener('touchmove', (e) => {
    if (!isDragging) return;
    const currentY = e.touches[0].clientY;
    const deltaY = currentY - startY;

    if (deltaY > 0) {
      nextScreen.classList.remove('hidden');
      nextScreen.style.transform = `translateY(${deltaY}px)`;
    }
  });

  container.addEventListener('touchend', () => {
    isDragging = false;
    if (nextScreen.style.transform.includes('translateY')) {
      nextScreen.style.transform = 'translateY(0)';
      currentScreen.classList.add('hidden');
    }
  });
});