为列表视图添加涟漪效果

.list-item::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease-out;
}

const listItems = document.querySelectorAll('.list-item');

listItems.forEach(item => {
  item.addEventListener('click', (event) => {
    const ripple = document.createElement('span');
    ripple.classList.add('ripple');
    item.appendChild(ripple);

    setTimeout(() => {
      ripple.style.opacity = '1';
    }, 0);

    setTimeout(() => {
      ripple.style.opacity = '0';
      setTimeout(() => {
        item.removeChild(ripple);
      }, 300);
    }, 500);
  });
});