图片旋转与缩放组合过渡仅首次生效问题求助

问题分析 #

你当前的代码有两个核心问题：

• transform属性合并：scale(4) rotate(xxdeg) scale(0.25)会被浏览器合并为rotate(xxdeg) scale(1)（因为4*0.25=1），根本达不到先缩小后放大的效果。
• 过渡触发失效：第一次点击后，直接设置新的transform值，浏览器会直接应用新状态，不会触发过渡——因为没有让浏览器先渲染当前状态，再更新新状态的过程。

正确实现方案 #

用CSS @keyframes定义完整的旋转+缩放动画，每次点击时给元素添加动画类，动画结束后移除类，同时累加旋转角度，确保下次点击的起始角度正确：

CSS 代码

.image {
  /* 初始状态 */
  transform: rotate(0deg);
}

/* 定义旋转+缩放的关键帧动画 */
@keyframes rotateZoom {
  0% {
    transform: rotate(var(--start-angle)) scale(1);
  }
  50% {
    transform: rotate(calc(var(--start-angle) + 45deg)) scale(0.25);
  }
  100% {
    transform: rotate(calc(var(--start-angle) + 90deg)) scale(1);
  }
}

/* 动画类 */
.image-animate {
  animation: rotateZoom 2s ease-in-out forwards;
}

JavaScript 代码

let ja = 0;
const button = document.querySelector('button');
const image = document.querySelector('.image');

button.addEventListener('click', function() {
  // 设置动画的起始角度变量
  image.style.setProperty('--start-angle', `${ja}deg`);
  // 添加动画类触发动画
  image.classList.add('image-animate');
  // 动画结束后移除类，更新角度
  image.addEventListener('animationend', function onEnd() {
    ja += 90;
    image.classList.remove('image-animate');
    image.removeEventListener('animationend', onEnd);
  }, { once: true });
});

方案说明 #

1. 关键帧动画：通过@keyframes精确控制动画过程，0%是初始旋转角度+原大小，50%是旋转到中间角度+缩小，100%是旋转完成+恢复原大小，完美实现同步的旋转和缩放变化。
2. 动画类触发：每次点击添加动画类，动画结束后移除，确保下次点击可以重新触发动画；用CSS变量--start-angle传递每次的起始旋转角度，保证旋转的连续性。
3. 避免状态冲突：animationend事件用{ once: true }确保只执行一次，防止多次绑定事件导致的逻辑混乱。

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