刪除類后 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有意放在代碼中，因為我希望“circle”在打開和關閉時平滑移動（以 0.5s 進行轉換）邊欄。 因為在關閉側邊欄兩次后，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/