如何实现点击按钮时按钮翻转但文字不应用动画效果？

嘿，这个问题很常见——当你给整个按钮加3D翻转动画时，里面的文字自然会跟着转。要让按钮翻但文字保持正向，我们只需要把文字和按钮的动画部分“拆分开”就行，下面是具体的实现方案：

步骤1：调整HTML结构 #

给按钮内的文字套一个<span>容器，这样我们就能单独控制文字的变换逻辑：

<body>
  <button id="btn" onclick="clickFunction()" type="button">
    <span>Send</span>
  </button>
  <script src="click.js"></script>
</body>

步骤2：修改CSS动画逻辑 #

我们让按钮本身执行翻转动画，同时让内部的<span>执行反向的翻转动画，用反向变换抵消按钮的翻转效果，这样文字就能始终保持正向：

button {
  font-family: 'Nunito', sans-serif;
  font-weight: bold;
  font-size: 40px;
  color: #fff;
  background: #01579B;
  border: 4px solid #01579B;
  border-radius: 100px;
  padding: 10px 40px;
  /* 开启3D空间，让翻转效果更自然 */
  transform-style: preserve-3d;
}

/* 按钮的翻转动画 */
@keyframes btnFlip {
  0% { transform: rotateX(0deg); }
  100% { transform: rotateX(180deg); }
}

/* 文字的反向翻转，抵消按钮的翻转 */
@keyframes textFlip {
  0% { transform: rotateX(0deg); }
  100% { transform: rotateX(-180deg); }
}

/* 用类来控制动画和样式变化，让逻辑更清晰 */
button.flipped {
  animation: btnFlip 1s forwards;
  background: #00E676;
  border-color: #fff;
}

button.flipped span {
  animation: textFlip 1s forwards;
}

步骤3：优化JavaScript逻辑 #

原来的代码直接修改行内样式，现在我们改用添加类的方式，让样式和JavaScript逻辑分离，后期维护更方便：

function clickFunction() {
  const btn = document.getElementById("btn");
  const btnText = btn.querySelector('span');
  
  if (btnText.innerText === "Send") {
    btnText.innerText = "Sent!";
    // 添加类触发动画和样式变化
    btn.classList.add('flipped');
  }
}

方案说明 #

• 用forwards关键字让动画结束后保持最终状态，避免按钮翻转后又弹回初始状态
• 反向翻转的文字会和按钮的翻转效果完全抵消，视觉上文字始终是正向的
• 类名控制的方式比直接修改行内样式更符合前端开发的最佳实践

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