实现多卡片翻转与删除交互效果的JavaScript教程

// 获取所有卡片元素
const cards = document.querySelectorAll(".card");
// 获取所有翻转按钮
const flipBtns = document.querySelectorAll('.fliping');
// 获取所有删除按钮
const deleteBtns = document.querySelectorAll('.delete');

// 为每个翻转按钮添加点击事件监听器
flipBtns.forEach(function(flipBtn) {
  flipBtn.addEventListener('click', function() {
    // 使用 this.closest('.card') 找到当前点击按钮所属的最近的 .card 祖先元素
    const card = this.closest('.card');
    // 如果找到了卡片，则切换其 'flipcard' 类
    if (card) {
      card.classList.toggle('flipcard');
    }
  });
});

// 为每个删除按钮添加点击事件监听器
deleteBtns.forEach(function(deleteBtn) {
  deleteBtn.addEventListener('click', function() {
    // 使用 this.closest('.card') 找到当前点击按钮所属的最近的 .card 祖先元素
    const card = this.closest('.card');
    // 如果找到了卡片，则添加 'fall' 类
    if (card) {
      card.classList.add('fall');
    }
  });
});

<div class="card-container">
  <div class="card">
    <div class="card-content front">
      <h2>卡片标题 1</h2>
      <p>这是卡片 1 的正面内容。</p>
      <button class="fliping">翻转</button>
      <button class="delete">删除</button>
    </div>
    <div class="card-content back">
      <h2>卡片背面 1</h2>
      <p>这是卡片 1 的背面内容。</p>
      <button class="fliping">翻转</button>
    </div>
  </div>

  <div class="card">
    <div class="card-content front">
      <h2>卡片标题 2</h2>
      <p>这是卡片 2 的正面内容。</p>
      <button class="fliping">翻转</button>
      <button class="delete">删除</button>
    </div>
    <div class="card-content back">
      <h2>卡片背面 2</h2>
      <p>这是卡片 2 的背面内容。</p>
      <button class="fliping">翻转</button>
    </div>
  </div>

  <!-- 更多卡片... -->
</div>

/* 基础卡片样式 */
.card {
  width: 200px;
  height: 300px;
  perspective: 1000px; /* 3D翻转效果的关键 */
  margin: 10px;
  float: left; /* 示例布局 */
  position: relative;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.card-content {
  width: 100%;
  height: 100%;
  position: absolute;
  backface-visibility: hidden; /* 背面隐藏 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 1px solid #ccc;
  background-color: #f0f0f0;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  padding: 15px;
  box-sizing: border-box;
}

.card-content.front {
  transform: rotateY(0deg);
}

.card-content.back {
  transform: rotateY(180deg);
  background-color: #e0e0e0;
}

/* 翻转效果 */
.card.flipcard {
  transform: rotateY(180deg);
}

/* 删除（坠落）效果 */
.card.fall {
  animation: fallEffect 1s forwards;
  pointer-events: none; /* 移除后禁止交互 */
}

@keyframes fallEffect {
  0% {
    opacity: 1;
    transform: translateY(0) rotateZ(0deg);
  }
  100% {
    opacity: 0;
    transform: translateY(200px) rotateZ(30deg);
    /* 可以添加其他效果，如缩小 */
  }
}

/* 按钮样式 */
button {
  margin-top: 10px;
  padding: 8px 15px;
  cursor: pointer;
}