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

Question

请检查我的小提琴:https://jsfiddle.net/iqbal98/4zdh6c3g/23/

<div id="cart-circle">
      <div id="cart-content">
          <div id="cart-icon" class="text-bordered fa fa-shopping-cart"></div>
          <div id="cart-title" class="text-bordered animated bounceOutRight"></div>
      </div>
 </div>

open-cart-circle从div(带有cart-circle类)中删除类后出现问题,该类在用户单击圆圈时添加.open-cart-circle调整的height,width和border-bottom-left-radius性质,由动画进行的:

@keyframes trigger-cart-circle {
  100% {
    height: 95px;
    width: 495px;
    border-bottom-left-radius: 26%; }
}

这是open-cart-circle这样的:

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

因此,当open-cart-circle添加动画开始时,我希望你注意到animation-fill-mode故意放在代码中,因为我希望"圆圈"在打开和关闭侧边栏时平滑移动(过渡0.5秒).因为关闭侧栏两次后,CSS转换似乎无法正常工作.为什么？我刚刚陷入困境......

这里cart-circle必须有过渡:所有这些都是因为这个"圆圈"应该在关闭时"轻柔地"恢复到原来的形状:

#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*/
}

编辑

不要will-change财产有任何点这里进行了可能的解决方案？

Answer 1

如您所见,transition不适用于animation.

所以解决方案很简单,将trigger-*动画重命名为trigger-open-*并创建相应的trigger-close-*动画.

然后每次添加open-*类时,删除close-*该类.每次删除open-*该类时,添加close-*该类.

这是你的jsfiddle修复. https://jsfiddle.net/pu5y8quz/