如何用JavaScript实现点击按钮时数组内容切换3个字符的动画效果

嘿，你的HTML基础结构已经搭得挺好啦！咱们一步步把这个点击蓝色按钮切换字符带动画的功能搞出来，分三个核心环节完成：

1. 准备字符数据源 & 优化HTML #

首先咱们先定义好每个卡片要切换的候选字符数组（你可以根据需求随便改），同时给按钮加个文字方便识别，顺便阻止默认跳转行为：

优化后的HTML

<div class="cards">
  <div id="card1" class="card">L</div>
  <div id="card2" class="card">A</div>
  <div id="card3" class="card">X</div>
  <!-- 加文字+阻止默认跳转 -->
  <a class="btn btn-flat shuffle" href="#" onclick="travelSurprise(); return false;">Shuffle</a>
</div>

定义字符数组（放在JS开头）

// 每个卡片对应的候选字符集合，按需修改
const charSets = [
  ['L', 'P', 'M', 'T', 'V'], // 对应card1的可选字符
  ['A', 'O', 'U', 'E', 'I'], // 对应card2的可选字符
  ['X', 'Y', 'Z', 'W', 'Q']  // 对应card3的可选字符
];

2. 添加CSS切换动画样式 #

动画是核心，咱们先给卡片加基础样式，再做一个向上淡出+向下淡入的过渡动画（也可以换成旋转、缩放等效果）：

/* 卡片基础样式 */
.card {
  display: inline-block;
  width: 60px;
  height: 60px;
  line-height: 60px;
  text-align: center;
  font-size: 32px;
  font-weight: bold;
  background: #f0f0f0;
  border-radius: 8px;
  margin: 0 8px;
  /* 开启硬件加速，让动画更流畅 */
  transform: translateZ(0);
  /* 过渡效果时长，和JS定时器对应 */
  transition: all 0.3s ease;
}

/* 动画触发类：点击按钮时添加这个类 */
.card.shuffling {
  opacity: 0;
  transform: translateY(-20px);
}

/* 可选：如果想要旋转动画，替换上面的.shuffling类 */
/*
@keyframes shuffleSpin {
  0% { transform: rotate(0deg) scale(1); opacity: 1; }
  50% { transform: rotate(180deg) scale(0.8); opacity: 0.5; }
  100% { transform: rotate(360deg) scale(1); opacity: 1; }
}
.card.shuffling {
  animation: shuffleSpin 0.6s ease forwards;
}
*/

3. 完善JavaScript核心函数travelSurprise #

咱们要实现的逻辑是：点击按钮后，给每个卡片添加动画类，等动画结束后随机切换字符，最后移除动画类准备下一次点击：

function travelSurprise() {
  // 获取三个卡片元素
  const cards = [
    document.getElementById('card1'),
    document.getElementById('card2'),
    document.getElementById('card3')
  ];

  // 遍历每个卡片执行切换逻辑
  cards.forEach((card, index) => {
    // 给当前卡片添加动画类，触发动画
    card.classList.add('shuffling');

    // 等待动画结束（时长和CSS transition一致：0.3s）
    setTimeout(() => {
      // 从对应字符数组里随机选一个字符
      const chars = charSets[index];
      const randomChar = chars[Math.floor(Math.random() * chars.length)];
      // 更新卡片内容
      card.textContent = randomChar;

      // 延迟一点移除动画类，避免动画突兀结束
      setTimeout(() => {
        card.classList.remove('shuffling');
      }, 50);
    }, 300);
  });

  // 可选：如果想要逐个卡片依次动画，把上面的forEach改成下面的逻辑
  // cards.forEach((card, index) => {
  //   setTimeout(() => {
  //     card.classList.add('shuffling');
  //     setTimeout(() => {
  //       const chars = charSets[index];
  //       card.textContent = chars[Math.floor(Math.random() * chars.length)];
  //       setTimeout(() => card.classList.remove('shuffling'), 50);
  //     }, 300);
  //   }, 200 * index); // 每个卡片延迟200ms执行，形成依次动画的效果
  // });
}

额外小 tips #

• 如果你想让动画更有层次感，可以调整每个卡片的动画延迟，实现逐个切换的效果（上面代码里已经注释了可选逻辑）
• 可以给按钮也加个点击动画，比如按下时缩小一点，提升交互体验
• 如果字符数组需要动态加载，直接修改charSets数组即可，不用动核心逻辑

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