如何中途停止CSS Transition中的Transform动画？

这个需求我太熟了！直接改transform或者清过渡属性根本行不通，得用个小技巧把当前动画状态“钉”住，具体步骤和代码如下：

核心思路 #

当过渡动画运行时，元素的transform值是动态计算的矩阵（不是你写的rotate(20deg)这种直观值）。我们需要先拿到这个实时计算后的样式值，然后关闭过渡，再把这个值赋值给元素，这样元素就会停在当前状态，不会继续动画。

具体实现代码 #

假设你的HTML元素是带.box类的盒子，先看初始的CSS和启动动画的JS：

.box {
  width: 100px;
  height: 100px;
  background: #ccc;
  transition: all 2s; /* 全局过渡 */
}

const box = document.querySelector('.box');
// 启动旋转过渡动画
box.style.transform = 'rotate(20deg)';

接下来是1秒后暂停动画的逻辑：

setTimeout(() => {
  // 1. 获取元素当前实时计算的transform值（动画中途的状态）
  const currentTransform = window.getComputedStyle(box).transform;
  
  // 2. 临时关闭过渡，避免后续修改样式触发新动画
  box.style.transition = 'none';
  
  // 3. 把当前状态赋值给元素，固化住位置
  box.style.transform = currentTransform;
  
  // 这里就可以放心执行你的业务操作了
  console.log('动画已暂停，状态保持完成');
}, 1000);

为什么之前的方法没用？ #

• 设transform: none或空字符串：会直接让元素跳转到初始状态，不是暂停在中途；
• 设display: none：虽然能停动画，但元素会从页面消失，完全不符合“保持当前状态”的需求；
• 而用getComputedStyle拿到的是动画运行到该时刻的真实样式，把它设为元素的固定样式，再关掉过渡，自然就停住了。

后续重启动画（可选） #

如果之后需要重新触发过渡，只要把过渡属性恢复回去，再设置新的transform值就行：

// 比如要继续旋转到40度
box.style.transition = 'all 2s';
box.style.transform = 'rotate(40deg)';

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