Javascript 删除类后CSS转换不起作用

请检查我的小提琴：

这就是

opencart circle

的样子：

.open-cart-circle {
  animation-delay: 0s;
  animation-duration: 0.8s;
  animation-name: trigger-cart-circle;
  animation-fill-mode: both; 
}

因此，当添加

open cart circle

时，动画开始，我希望您注意

动画填充模式

故意放在代码中，因为我希望在打开和关闭侧栏时“圆”平滑移动（0.5s的过渡）。因为关闭侧栏两次后，CSS转换似乎不起作用。为什么？我只是被困了几个小时

此处

购物车圆圈

必须具有过渡：这一切都是因为关闭时，此“圆圈”应“柔和”恢复其原始形状：

#cart-circle {
  position: fixed;
  z-index: 999;
  box-shadow: 0 8px 11px rgba(0, 0, 0, 0.247);
  top: 0;
  right: 0;
  text-align: right;
  border-bottom-left-radius: 100%;
  border: 0.051px solid #333;
  background-color: #f1c40f;
  cursor: pointer;
  transition: all 0.5s;   /*HERE*/
}

编辑

---

是否会更改

属性此处是否有任何可能的解决方案？

如您所见，

转换

不适用于

动画

因此解决方案很简单，将

触发器-*

动画重命名为

触发器打开-*

并创建相应的

触发器关闭-*

动画

然后每次添加

open-*

类时，删除

close-*

类。 每次删除

open-*

类时，添加

close-*

类

这是您的jsfiddle。

---

修复了js错误，并在结尾删除了

$（body）

：哦，是的，这就是我原来的侧边栏的实际工作方式。我I’我要更新Fiddle它会被认为是一个bug吗？我找不到任何解决方案，除了

将更改

仅用于性能优化。它不会影响功能。我找不到问题，但有一个很好的例子，所以你打算奖励赏金吗？？

.open-cart-circle {
  animation-delay: 0s;
  animation-duration: 0.8s;
  animation-name: trigger-cart-circle;
  animation-fill-mode: both; 
}

#cart-circle {
  position: fixed;
  z-index: 999;
  box-shadow: 0 8px 11px rgba(0, 0, 0, 0.247);
  top: 0;
  right: 0;
  text-align: right;
  border-bottom-left-radius: 100%;
  border: 0.051px solid #333;
  background-color: #f1c40f;
  cursor: pointer;
  transition: all 0.5s;   /*HERE*/
}