CSS翻转动画：实现每次点击均重置为左向右展开效果

这个问题的核心在于你当前的实现是通过切换激活类来触发动画的——第一次点击添加类触发展开，第二次移除类触发反向收起，自然会出现交替方向的效果。要实现每次点击都从左向右展开，我们需要让元素每次都从初始状态重新触发正向动画，具体修改方案如下：

1. 修改JavaScript触发逻辑 #

不要直接切换类，而是每次点击时先重置元素到初始状态，再重新添加激活类触发动画。这里关键是要强制浏览器完成一次重绘，否则直接移除再添加类可能会被浏览器优化掉，看不到动画效果：

function showCard() {
  // 替换成你实际的卡片选择器
  const cardElement = document.querySelector('.card');
  
  // 第一步：移除激活类，让卡片回到未展开的初始状态
  cardElement.classList.remove('flipped');
  
  // 强制浏览器重绘（这一步很重要，否则动画可能不生效）
  void cardElement.offsetWidth;
  
  // 第二步：重新添加激活类，触发左向右的展开动画
  cardElement.classList.add('flipped');
}

2. 确保CSS动画的正向一致性 #

确认你的CSS中，卡片从初始状态到.flipped状态的过渡是明确的左向右展开逻辑，比如：

.card {
  /* 初始状态样式 - 左侧收起 */
  transform: rotateY(-90deg);
  transition: transform 0.5s ease-in-out;
}

.card.flipped {
  /* 展开后的状态 - 正常显示 */
  transform: rotateY(0);
}

这样每次从rotateY(-90deg)过渡到rotateY(0)，都会是左向右的展开动画。

额外说明 #

如果你的页面中有多个卡片，记得把选择器改成更精准的（比如通过事件对象获取点击按钮对应的目标卡片），避免所有卡片同时触发动画。比如：

function showCard(event) {
  // 假设按钮和卡片在同一个容器内，通过容器关联目标卡片
  const cardElement = event.target.closest('.card-wrapper').querySelector('.card');
  
  cardElement.classList.remove('flipped');
  void cardElement.offsetWidth;
  cardElement.classList.add('flipped');
}

内容的提问来源于stack exchange，提问作者Chris Nielsen