记忆游戏匹配卡片融化效果实现及位置固定技术需求

1. 编写CSS实现融化动画 #

先定义一个关键帧动画，让卡片呈现视觉上的融化消失效果，同时保持元素占位避免其他卡片移位：

/* 定义融化动画 */
@keyframes melt {
  0% {
    opacity: 1;
    transform: scaleY(1) skewX(0);
  }
  30% {
    transform: scaleY(0.9) skewX(3deg);
    opacity: 0.8;
  }
  60% {
    transform: scaleY(0.6) skewX(6deg);
    opacity: 0.5;
  }
  100% {
    transform: scaleY(0) skewX(10deg);
    opacity: 0;
    visibility: hidden; /* 动画结束后隐藏元素，但保留原占位 */
  }
}

/* 动画触发类 */
.melt-effect {
  animation: melt 1s forwards; /* forwards让动画停在最后一帧状态 */
  pointer-events: none; /* 防止动画过程中重复点击卡片 */
}

2. 修改JavaScript逻辑 #

不用delete或remove()（这两个操作会改变布局或数组结构），通过添加动画类触发视觉效果，动画结束后保持元素占位并重置匹配数组：

function go(elem) {
  if (mycards.length < 2) {
    mycards.push(elem.style.backgroundColor);
    myelemcards.push(elem);
    console.log(myelemcards);
    elem.classList.remove('reverse');

    if (mycards.length == 2) {
      if (mycards[0] == mycards[1]) {
        score++;
        // 注意：如果result是id选择器，要加#
        document.querySelector("#result").innerHTML = score;
        
        // 给匹配的两张卡片添加融化动画类
        myelemcards[0].classList.add('melt-effect');
        myelemcards[1].classList.add('melt-effect');

        // 等待动画结束后重置数组，保持元素占位
        setTimeout(function() {
          // 让卡片不可见，但保留原位置
          myelemcards[0].style.visibility = 'hidden';
          myelemcards[1].style.visibility = 'hidden';
          // 重置卡片数组，准备下一轮匹配
          mycards = [];
          myelemcards = [];
        }, 1000); // 时长和动画时长保持一致
      } else {
        // 可选：添加不匹配时的翻回逻辑
        setTimeout(() => {
          myelemcards[0].classList.add('reverse');
          myelemcards[1].classList.add('reverse');
          mycards = [];
          myelemcards = [];
        }, 1000);
      }
    }
  }
}

核心注意点 #

• 用visibility: hidden替代remove()：元素虽不可见，但仍占据原位置，不会导致其他卡片移位。
• animation: melt 1s forwards：确保动画执行完成后停留在消失状态。
• pointer-events: none：避免动画过程中用户重复点击卡片引发逻辑错误。

内容的提问来源于stack exchange，提问作者ארי פיין