按下时设置单元格动画会影响其他单元格

// 示例代码（React）
import React, { useState } from 'react';

function Cell({ children }) {
  const [isAnimating, setIsAnimating] = useState(false);

  const handleClick = () => {
    setIsAnimating(true);
    setTimeout(() => setIsAnimating(false), 300); // 假设动画持续时间为300ms
  };

  return (
    <div onClick={handleClick} className={`cell ${isAnimating ? 'animate' : ''}`}>
      {children}
    </div>
  );
}

/* 示例代码（CSS） */
.cell.animate {
  /* 动画样式 */
  transition: all 0.3s ease;
  transform: scale(1.1);
}

// 示例代码（原生JavaScript）
document.querySelectorAll('.cell').forEach(cell => {
  cell.addEventListener('click', function() {
    this.classList.add('animate');
    setTimeout(() => this.classList.remove('animate'), 300);
  });
});

// 示例代码（JavaScript）
function animateCell(cell) {
  cell.classList.add('animate');
  requestAnimationFrame(() => {
    setTimeout(() => cell.classList.remove('animate'), 300);
  });
}