Javascript 存在动画属性时，转换不起作用

我在试着做一个能改变时区的时钟。但是当我更改时区（更改rotate属性）时，不会触发transition属性。当我移除“动画”属性时，确实如此，但我需要两者。这是我的密码：

@keyframes hours {
  to {
    transform: rotate(360deg);
  }
}
#watch .hours-hand {
  width: 0.8em;
  height: 7em;
  background: #232425;
  position: absolute;
  bottom: 50%;
  left: 50%;
  margin: 0 0 -0.8em -0.4em;
  box-shadow: #232425 0 0 2px;
  transform-origin: 0.4em 6.2em;
  transform: rotate(0deg);
  transition: all 1s;
}

---

您只需在已具有

动画

属性的元素周围添加一个包装，然后旋转该包装即可：

const watch=document.getElementById（'watch'）；
const changeTimeButton=document.getElementById（'changeTimeButton'）；
设移位=0；
changeTimeButton.onclick=（日期）=>{
班次=（班次+360/12）%360；
watch.style.transform=`rotate（${shift}deg）`；
};
@关键帧小时数{
到{
变换：旋转（360度）；
}
}
身体{
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
证明内容：中心；
高度：100vh；
保证金：0；
}
#更改时间按钮{
边缘顶部：16px；
}
#观看{
位置：相对位置；
盒影：0.32px 0 rgba（0,0,0,125）；
边界半径：100%；
宽度：50vh；
高度：50vh；
}
.小时制{
位置：绝对位置；
顶部：8px；
底部：50%；
左：计算（50%-2px）；
宽度：4px；
背景：#232425；
变换原点：50%100%；
动画名称：小时；
动画持续时间：5s；
动画迭代次数：无限；
动画计时功能：线性；
}

更改时间
您也可以共享您的HTML吗？
var changeTime = (date) => {
  const hoursHand = document.querySelector(".hours-hand");
  const minutesHand = document.querySelector(".minutes-hand");

  const minutes = date.getMinutes();
  const hours = date.getHours();

  const newMinutes = (360 / 60) * minutes;
  const newHours = (360 / 12) * hours;

  hoursHand.style.transform = `rotate(${newHours}deg)`;
  minutesHand.style.transform = `rotate(${newMinutes}deg)`;
};