如何实现点击图片旋转后保持状态，再次点击切换回原状态？

你的现有方案存在几个问题：使用两张图片切换冗余、动画结束后无法保留最终状态、JS有语法错误，且依赖setTimeout的切换逻辑不够可靠。下面是优化后的实现，用单张图片+CSS类控制状态，实现点击切换并保持状态的效果：

优化后的HTML #

只保留一张箭头图片，通过类来控制状态：

<div class="profile-side">
 <img src="./references/images/profile pic.png" alt="profile pic">
 <img class="toggle-arrow" src="./references/images/next.png" alt="toggle arrow">
 <p>Username</p>
</div>

优化后的CSS #

这里提供两种方案，选其一即可：

方案1：用Transition实现平滑切换（更简洁） #

.toggle-arrow {
  /* 初始状态为右箭头 */
  transform: rotate(0deg);
  /* 添加过渡动画 */
  transition: transform 1s ease;
  cursor: pointer;
}

/* 切换为下箭头的状态类 */
.toggle-arrow.is-down {
  transform: rotate(90deg);
}

方案2：用Keyframes动画实现（保留你原有的动画逻辑） #

.toggle-arrow {
  cursor: pointer;
}

/* 右箭头转下箭头的动画 */
@keyframes rotate-to-down {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(90deg); }
}

/* 下箭头转回右箭头的动画 */
@keyframes rotate-to-right {
  0% { transform: rotate(90deg); }
  100% { transform: rotate(0deg); }
}

/* 动画类：执行转下箭头动画并保留最终状态 */
.toggle-arrow.animate-down {
  animation: rotate-to-down 1s ease forwards;
}

/* 动画类：执行转回右箭头动画并保留最终状态 */
.toggle-arrow.animate-right {
  animation: rotate-to-right 1s ease forwards;
}

/* 下箭头的状态类，确保动画结束后保持状态 */
.toggle-arrow.is-down {
  transform: rotate(90deg);
}

优化后的JavaScript #

对应Transition方案的JS（极简） #

const toggleArrow = document.querySelector('.toggle-arrow');
let isDown = false;

toggleArrow.addEventListener('click', () => {
  isDown = !isDown;
  // 切换状态类
  toggleArrow.classList.toggle('is-down');
});

对应Keyframes方案的JS #

const toggleArrow = document.querySelector('.toggle-arrow');
let isDown = false;

toggleArrow.addEventListener('click', () => {
  isDown = !isDown;
  
  // 先移除所有动画类，避免冲突
  toggleArrow.classList.remove('animate-down', 'animate-right');
  
  if (isDown) {
    toggleArrow.classList.add('animate-down');
    // 动画结束后添加状态类，确保状态保留
    toggleArrow.addEventListener('animationend', () => {
      toggleArrow.classList.add('is-down');
    }, { once: true }); // once参数确保这个回调只执行一次
  } else {
    toggleArrow.classList.add('animate-right');
    toggleArrow.addEventListener('animationend', () => {
      toggleArrow.classList.remove('is-down');
    }, { once: true });
  }
});

关键优化点 #

• 移除冗余的两张图片，只用一张通过旋转实现状态切换
• 用CSS类控制状态，而非直接操作DOM样式，更符合可维护性原则
• 方案1用transition实现平滑切换，代码极简；方案2用forwards关键字让动画结束后保留最终状态
• 修复了原JS代码末尾多余的})语法错误
• 用状态变量isDown跟踪当前箭头方向，避免依赖DOM判断

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