如何在Vue中通过JavaScript动态设置@keyframes的transform旋转值？

这问题我之前也遇到过，用CSS自定义属性（变量）来解决是最优雅的方案——既能保持代码清晰，又能轻松实现动态更新关键帧的效果，完美匹配你的需求。

解决方案步骤 #

1. 修改CSS代码，引入自定义变量

把你原本固定的旋转值替换成CSS变量，同时保留一个默认值作为 fallback：

.spin { 
  animation-name: spin; 
  animation-duration: 3s; 
  animation-timing-function: ease-out; 
  animation-fill-mode: both; 
} 

@keyframes spin { 
  0% { transform: rotate(0deg); } 
  /* 使用自定义变量，默认值为你原来的1665deg */
  100% { transform: rotate(var(--end-rotation, 1665deg)); } 
}

2. 在JavaScript方法中动态更新变量

在你的spinWheel()方法计算出app.end之后，添加一行代码把这个值传给CSS变量：

spinWheel() { 
  let segments = [], segmentSize, winningSegment, app = this; 
  app.spin = 'spin'; 
  // 计算扇区尺寸
  segmentSize = 360 / 6; 
  for(let i = 0; i <= 5; i++) { 
    segments[i] = i*segmentSize; 
  } 
  winningSegment = Math.floor(Math.random() * 6); 
  let start = winningSegment === 0 ? 0 : segments[winningSegment]; 
  let end = winningSegment === 5 ? 360 : segments[winningSegment+1]; 
  let winningArea = {start: start , end: end }; 
  app.start = 0; 
  app.end = (360 * Math.floor(Math.random() * (30 - 15 + 1) + 15)) + Math.floor(Math.random() * (winningArea.end - winningArea.start + 1) + winningArea.start);
  
  // 新增：把计算好的旋转值传给CSS变量
  // 如果动画只作用于特定元素，可以把document.documentElement换成该元素的DOM对象
  document.documentElement.style.setProperty('--end-rotation', `${app.end}deg`);
}

原理说明 #

CSS变量会自动关联到@keyframes的规则中，每次调用spinWheel()时，新计算出的app.end值会通过setProperty更新变量，浏览器会立刻把这个新值应用到动画的100%状态上，实现动态控制旋转角度的效果。

兼容老浏览器的备选方案（不推荐） #

如果需要兼容IE11这类不支持CSS变量的老浏览器，可以通过遍历样式表修改关键帧规则：

// 在spinWheel方法末尾添加这段代码
let spinKeyframes = null;
// 遍历所有样式表查找spin关键帧
for (let styleSheet of document.styleSheets) {
  try {
    for (let rule of styleSheet.cssRules) {
      if (rule.type === CSSRule.KEYFRAMES_RULE && rule.name === 'spin') {
        spinKeyframes = rule;
        break;
      }
    }
  } catch(e) {
    // 跨域样式表会抛出异常，直接跳过
    continue;
  }
}

// 修改100%状态的旋转值
if (spinKeyframes) {
  spinKeyframes.deleteRule('100%');
  spinKeyframes.appendRule(`100% { transform: rotate(${app.end}deg); }`);
}

不过还是优先推荐CSS变量方案，代码更简洁易维护，现代浏览器都支持。

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