CSS过渡动画：类添加/移除时的动画平滑过渡问题

嘿，这个问题我之前也碰到过！核心原因就是：当你直接移除animation相关的类时，浏览器会立刻终止动画，让元素瞬间跳回初始的transform状态，完全没有过渡效果。下面给你两个实用的解决方案，你可以根据需求选择：

方案一：等当前旋转周期结束再停止 #

如果希望元素完成当前的一圈旋转后再停下，我们可以监听动画的animationiteration事件（这个事件会在每完成一个动画周期时触发）。点击停止按钮时先标记“要停止”，等当前周期结束后再移除动画类。

修改你的JS代码如下：

var toggle2d = document.getElementById('toggle-2d');
var plain = document.querySelector('.plain');
var shouldStop = false;

// 监听动画完成一个周期的事件
plain.addEventListener('animationiteration', function() {
  if (shouldStop) {
    plain.classList.remove('spin'); // 移除动画类，停止旋转
    shouldStop = false;
  }
});

toggle2d.onclick = () => {
  if (plain.classList.contains('spin')) {
    shouldStop = true; // 标记需要停止，等当前转完再执行
  } else {
    plain.classList.add('spin'); // 启动旋转动画
  }
};

这样点击停止后，元素会老老实实转完当前这一圈，再回到初始位置，完全不会跳变。

方案二：平滑回滚到初始状态 #

如果想点击停止后立刻让元素平滑转回到初始位置，不用等周期结束，可以这么做：

1. 先获取元素当前的旋转角度（通过getComputedStyle解析transform矩阵）
2. 移除动画类的同时，把元素的transform设置为当前角度
3. 开启transition过渡，让元素平滑转到rotate(0deg)

代码示例：

var toggle2d = document.getElementById('toggle-2d');
var plain = document.querySelector('.plain');

toggle2d.onclick = () => {
  if (plain.classList.contains('spin')) {
    // 获取当前元素的计算样式，提取旋转角度
    const computedStyle = window.getComputedStyle(plain);
    const transformValue = computedStyle.transform;
    let currentAngle = 0;
    
    // 解析transform矩阵，计算当前旋转角度
    if (transformValue !== 'none') {
      const matrix = transformValue.match(/^matrix\((.+)\)$/)[1].split(', ');
      currentAngle = Math.round(Math.atan2(matrix[1], matrix[0]) * (180 / Math.PI));
    }
    
    // 移除动画类，设置当前角度，开启过渡
    plain.classList.remove('spin');
    plain.style.transform = `rotate(${currentAngle}deg)`;
    plain.style.transition = 'transform 0.5s ease-out';
    
    // 触发重绘后设置目标角度（避免浏览器合并样式，导致过渡不生效）
    requestAnimationFrame(() => {
      plain.style.transform = 'rotate(0deg)';
    });
    
    // 过渡结束后清理内联样式，避免影响下次动画
    plain.addEventListener('transitionend', function cleanup() {
      plain.style.transform = '';
      plain.style.transition = '';
      plain.removeEventListener('transitionend', cleanup);
    });
  } else {
    plain.classList.add('spin');
    // 清除过渡样式，避免干扰动画的正常播放
    plain.style.transition = '';
  }
};

需要确保你的.spin动画类是基于transform: rotate()定义的，比如：

.spin {
  animation: spin 2s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

小提示 #

• 方案一更适合需要保持动画完整性的场景，比如加载动画、循环展示的动效
• 方案二更适合需要即时交互反馈的场景，用户点击停止后立刻有平滑过渡
• 如果是3D旋转动画，解析角度的逻辑需要调整成处理matrix3d的格式

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