使用ES7+ React实现卡牌的翻转功能

状态定义

// 状态用于跟踪每张牌是否翻转 const [flippedCards, setFlippedCards] = useState([]); const [computerFlippedCards, setComputerFlippedCards] = useState(Array(5).fill(false));

卡片组件 (Card)

jsx

const Card = ({ card, isFlipped }) => { return ( <div className={`flip-card ${isFlipped ? 'flipped' : ''}`}> <div className="flip-card-inner"> <div className="flip-card-front">背面</div> <div className="flip-card-back">{card}</div> </div> </div> ); };

发牌并添加动画效果 (dealCardsWithAnimation)

jsx

const dealCardsWithAnimation = () => { // ...洗牌逻辑... // 初始化玩家手牌的翻转状态数组 setFlippedCards(Array(5).fill(false)); // 初始化电脑手牌的翻转状态数组 setComputerFlippedCards(Array(5).fill(false)); // 分配玩家手牌并设置翻转动画 playerHand.forEach((_, index) => { setTimeout(() => { setFlippedCards(prevFlipped => { const newFlipped = [...prevFlipped]; newFlipped[index] = true; return newFlipped; }); }, index * 300); }); // ...电脑手牌的翻转动画逻辑... };

渲染翻转的卡片

// 玩家手牌展示 {playerCards.map((card, index) => ( <Card key={index} card={card} isFlipped={flippedCards[index]} /> ))} // 电脑手牌展示（示例中电脑手牌始终显示正面，根据需求调整） {computerCards.map((card, index) => ( <Card key={index + 'c'} card={card} isFlipped={true} /> ))}

以上代码片段展示了如何定义翻转状态、创建带有翻转效果的卡片组件、初始化翻转状态数组、实现发牌时的翻转动画效果，以及如何在界面中渲染这些带有翻转效果的卡片。

涉及卡牌翻转功能的CSS代码主要集中在.flip-card及其相关类中，这些样式控制了卡牌翻转的视觉效果。下面是直接相关的代码段：

css

.flip-card { width: 15%; /* 调整宽度以适应横向展示，具体数值可根据实际情况调整 */ height: auto; /* 自动计算高度以保持宽高比 */ perspective: 1000px; /* 设置透视距离，影响3D翻转效果的深度 */ border-radius: 8px; /* 添加圆角让卡牌边缘更柔和 */ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */ } .flip-card-inner { position: relative; width: 100%; height: 100%; text-align: center; transition: transform 0.6s; /* 定义翻转过渡效果的持续时间 */ transform-style: preserve-3d; /* 保持子元素的3D空间 */ } .flip-card.flipped .flip-card-inner { transform: rotateY(180deg); /* 当添加.flipped类时，执行Y轴旋转180度实现翻转 */ } .flip-card-front, .flip-card-back { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; /* 隐藏背面，使得翻转时看不到背面内容 */ } /* 具体的前后面对应样式可以根据需要调整，例如颜色、背景等 */ .flip-card-front {...} .flip-card-back {...}

这段代码通过CSS3的3D变换（transform属性）实现了卡牌的翻转效果，同时利用了transition属性来平滑过渡这个变换过程，使得翻转动作看起来更加自然流畅。.flip-card.flipped .flip-card-inner这一规则是关键所在，它依赖于JavaScript动态添加或移除.flipped类来触发卡牌的翻转动画。