旋转菜单按钮图标切换时机异常问题求助

问题核心是图标切换的过渡未与旋转动画同步，关闭菜单时，购物车图标会在旋转动画结束前提前出现。以下是仅通过CSS调整的简单方案，无需修改JS或降低动画速度：

修改思路 #

• 给按钮的图标伪元素添加过渡延迟，让图标切换在旋转动画完成后再触发
• 打开菜单时重置延迟，保证图标和旋转同步变化
• 修正CSS选择器优先级，避免样式冲突

修改后的CSS代码 #

.shopButtons {
  background-color: blue;
  border: 3px solid black;
  border-radius: 40px;
  position: fixed;
  bottom: 15px;
  left: 15px;
  width: 80px;
  height: 80px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .5);
  transition: transform .75s; /* 明确过渡属性，避免影响其他样式 */
  transform: rotate(-359deg);
}

.shopButtons.openMenu {
  background-color: rgb(0, 0, 120);
  transform: rotate(0deg); /* 统一旋转状态到带父类的选择器，提升优先级 */
}

.shopButtons::after {
  content: '\1F6D2';
  color: white;
  font-size: 3em;
  transition: all .75s .75s; /* 增加0.75s延迟，与旋转动画时长匹配 */
  margin: auto;
  border-radius: inherit;
  display: flex; /* 确保图标在按钮内居中 */
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.shopButtons.openMenu::after {
  background-color: rgb(0, 0, 120);
  color: white;
  content: '\00D7';
  font-size: 50px;
  transition-delay: 0s; /* 打开菜单时取消延迟，保持同步 */
}

关键调整说明 #

• 给.shopButtons::after的过渡添加0.75s延迟，关闭菜单时，图标会等旋转动画完成后再切换回购物车样式
• 按钮处于openMenu状态时，伪元素的延迟重置为0s，保证打开时图标和旋转同步变化
• 明确指定.shopButtons的过渡属性为transform，避免不必要的样式过渡干扰
• 给伪元素添加flex布局属性，确保图标在按钮内居中显示（原代码的margin: auto可能不生效）

原JS和HTML代码无需修改 #

//Shops

const shopButtons = document.querySelector('.shopButtons')

//Shop animation on click

shopButtons.addEventListener('click', () => shopButtons.classList.toggle('openMenu'));

<html lang="en">

<head>
  <link rel="stylesheet" href="../css/style.css">
  <title>Website</title>
</head>

<body>
  <button class="shopButtons" id="mainShop"></button>

  <script src="../scripts/script.js"></script>
</body>

</html>

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