如何复制Mail.app的垃圾动画

<div class="mail-container">
  <div class="mail">
    <div class="mail-content">
      <p>这是一封垃圾邮件</p>
    </div>
  </div>
</div>

.mail-container {
  position: relative;
  width: 300px;
  height: 400px;
  overflow: hidden;
}

.mail {
  position: absolute;
  width: 200px;
  height: 100px;
  background-color: #fff;
  border: 1px solid #ccc;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  transition: transform 0.5s ease-in-out;
}

.mail-content {
  padding: 10px;
}

.mail.deleted {
  transform: translateY(-100%);
  transition: transform 0.5s ease-in-out;
}

const mail = document.querySelector('.mail');

mail.addEventListener('click', () => {
  mail.classList.add('deleted');
  setTimeout(() => {
    mail.style.display = 'none';
  }, 500);
});