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

复制Mail.app的垃圾动画可以通过使用CSS动画和JavaScript来实现。以下是一个简单的示例代码：

HTML代码：

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

CSS代码：

.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;
}

JavaScript代码：

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

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

在这个示例中，我们创建了一个具有垃圾邮件样式的邮件容器，并使用CSS动画实现了邮件被删除时的动画效果。当用户点击邮件时，我们使用JavaScript代码将邮件的类名添加为“deleted”，并在500毫秒后将其隐藏。这样就可以实现类似于Mail.app中的垃圾邮件删除动画效果。