javascript - 删除类后 CSS 转换不起作用

Question

将一些 CSS 应用到此组件时:

<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>

从 div 中删除类 open-cart-circle 后问题就出现了(带有 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 必须有 transition:all 因为这个“圆”在关闭时应该“柔和地”恢复到原来的形状:

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