如何实现修改元素样式的按钮自动重置CSS至默认状态？

我来帮你搞定这个自动重置CSS样式的需求，这里有两种实用方案，你可以根据场景选择：

方案1：用setTimeout延迟重置样式 #

这个方案简单直接，在触发硬币上移和音频播放后，设置一个定时器，到时间就把样式重置回默认状态：

<div class="coinboxcontainer">
  <img id="coin1" src="/wp-content/uploads/2022/10/coin.png" alt="box" width="40" height="40">
  <a onclick="tosscoin()">
    <img src="/wp-content/uploads/2022/10/coinbox.png" alt="box" width="40" height="40">
  </a>
  <audio id="audio" src="/wp-content/uploads/2022/10/coinsound.mp3"></audio>
  <script>
    function tosscoin() {
      const coin = document.getElementById("coin1");
      // 让硬币上移70px
      coin.style.transform = "translatey(-70px)";
      // 播放音效
      const audio = document.getElementById("audio");
      audio.play();
      
      // 延迟1秒（可根据音效时长调整）重置样式，回到初始位置
      setTimeout(() => {
        coin.style.transform = ""; // 清空transform，恢复默认状态
      }, 1000);
    }
  </script>
</div>

你可以修改1000这个毫秒值，让重置时机和音频播放时长匹配，体验会更自然。

方案2：用CSS动画实现（更优雅易维护） #

把动画逻辑放到CSS里，通过添加/移除类名控制动画，动画结束后会自动回到初始状态，比直接操作style更灵活：

<style>
  /* 定义硬币上移再回落的完整动画 */
  @keyframes tossCoin {
    0% { transform: translateY(0); }
    50% { transform: translateY(-70px); }
    100% { transform: translateY(0); }
  }
  
  /* 触发动画的类 */
  .coin-toss {
    animation: tossCoin 1s ease-in-out;
  }
</style>

<div class="coinboxcontainer">
  <img id="coin1" src="/wp-content/uploads/2022/10/coin.png" alt="box" width="40" height="40">
  <a onclick="tosscoin()">
    <img src="/wp-content/uploads/2022/10/coinbox.png" alt="box" width="40" height="40">
  </a>
  <audio id="audio" src="/wp-content/uploads/2022/10/coinsound.mp3"></audio>
  <script>
    function tosscoin() {
      const coin = document.getElementById("coin1");
      const audio = document.getElementById("audio");
      
      // 先移除类名（解决连续点击时动画不触发的问题）
      coin.classList.remove("coin-toss");
      // 强制浏览器重绘，确保重新添加类名时动画生效
      void coin.offsetWidth;
      // 添加类名触发动画
      coin.classList.add("coin-toss");
      
      // 播放音效
      audio.play();
    }
  </script>
</div>

你可以调整CSS里的1s来控制动画时长，和音效同步后交互体验会更流畅。

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