按钮点击仅首次旋转故障：实现textarea文本复制与按钮同步旋转

我明白你的问题了——复制功能正常，但按钮只有第一次点击会旋转，之后就没反应了。这是因为CSS动画在重复设置相同的animation属性值时不会自动重启，咱们来修复它：

问题根源 #

你原来的JS逻辑是检查animation样式是否为rotate 1s，第一次点击后设置了这个值，动画执行完后该样式依然保留。后续点击时，代码会把它设为none，但再次点击时重新设置rotate 1s，浏览器会认为属性值没有变化，不会重新触发动画。

修复方案 #

改用CSS类来控制动画，这样每次点击时先移除类，再强制浏览器重绘（确保动画状态重置），然后重新添加类，就能保证每次点击都触发旋转动画。同时优化复制逻辑，用更现代的navigator.clipboard.writeText替代已废弃的document.execCommand('copy')。

修改后的完整代码 #

HTML

<div class="box-2-wrap"> 
  <textarea class="out-put"></textarea> 
  <button type="button" id="copyEmailsButton" onclick="copyEmails()">Copy Emails</button> 
</div>

CSS

.box-2-wrap { 
  width: 100%; 
  height: 100%; 
  display: flex; 
  flex-direction: column; 
  border: 0px solid #333; 
}
.box-2-wrap textarea { 
  flex:1; 
  padding: 4%; 
  overflow-y: auto; 
  background-color: #333; 
  color: gold; 
  max-width: 100%; 
  min-width: 100%; 
  font-size: 110%; 
  border: none; 
  border-radius: 8px; 
}
.box-2-wrap button { 
  align-items: flex-end; 
  justify-content: center; 
  padding: 10px 2%; 
  width: 50%; 
  margin: 6% auto; 
  background-color: #178E44; 
  color: white; 
  font-size: 120%; 
  border: none; 
  border-radius: 4px; 
  /* 添加过渡，让动画更平滑 */
  transition: transform 0.1s;
}
@keyframes rotate { 
  0% { transform: rotate(0deg); } 
  50% { transform: rotate(360deg); } 
  100% { transform: rotate(0deg); } 
}
/* 新增旋转类 */
.rotate-animation {
  animation: rotate 1s linear;
}

JavaScript

function unSelectAll() {
  var output = document.getElementsByClassName("out-put")[0];
  output.blur(); // 用blur替代innerHTML清空，避免丢失用户输入
}

function copyEmails() {
  var output = document.getElementsByClassName("out-put")[0];
  const copyBtn = document.getElementById("copyEmailsButton");
  
  // 现代复制API，更可靠
  navigator.clipboard.writeText(output.value).then(() => {
    unSelectAll();
    
    // 重置动画：先移除类，强制重绘，再添加类
    copyBtn.classList.remove('rotate-animation');
    // 强制浏览器重绘，确保动画状态重置
    void copyBtn.offsetWidth;
    copyBtn.classList.add('rotate-animation');
    
    // 可选：动画结束后自动移除类，避免后续样式冲突
    setTimeout(() => {
      copyBtn.classList.remove('rotate-animation');
    }, 1000);
  }).catch(err => {
    console.error('复制失败:', err);
    // 降级方案，兼容旧浏览器
    output.select();
    document.execCommand('copy');
    unSelectAll();
  });
}

关键改动点 #

1. 用CSS类控制动画：避免直接操作style.animation，通过添加/移除类来触发动画，更易维护。
2. 强制重绘：void copyBtn.offsetWidth会让浏览器重新计算元素尺寸，重置动画状态，确保每次添加类都能触发动画。
3. 更新复制API：使用navigator.clipboard.writeText替代已废弃的document.execCommand，兼容性更好且更安全。
4. 优化unSelectAll：用blur()替代清空textarea内容，避免误删用户输入的文本。

这样修改后，每次点击按钮都会执行复制操作，同时按钮会同步旋转啦！

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