js左滑出弹出框

<div class="container">
  <div class="content">Swipe me!</div>
  <div class="popup">This is a popup</div>
</div>

.container {
  position: relative;
  width: 300px;
  height: 100px;
  overflow: hidden;
}

.content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #f0f0f0;
  transition: transform 0.3s ease;
}

.popup {
  position: absolute;
  top: 0;
  right: -100%;
  width: 100%;
  height: 100%;
  background-color: #ffcccb;
  transition: right 0.3s ease;
}

const container = document.querySelector('.container');
const content = document.querySelector('.content');
const popup = document.querySelector('.popup');

let startX = 0;
let currentX = 0;

container.addEventListener('touchstart', (e) => {
  startX = e.touches[0].clientX;
});

container.addEventListener('touchmove', (e) => {
  currentX = e.touches[0].clientX;
});

container.addEventListener('touchend', () => {
  const deltaX = currentX - startX;
  if (deltaX > 50) { // Swipe right to show popup
    content.style.transform = 'translateX(-100%)';
    popup.style.right = '0';
  } else {
    content.style.transform = 'translateX(0)';
    popup.style.right = '-100%';
  }
});