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>

从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有意放在代码中，因为我想要＆＃34;圈＆＃34;打开和关闭侧杆时，平稳移动（过渡0.5秒）。因为在关闭侧栏两次后，CSS过渡似乎不起作用。为什么？我刚刚陷入困境......

此处cart-circle必须有转换：全部因为这个＆＃34;圈＆＃34;应该＆＃34;轻轻地＆＃34;关闭时恢复原状：

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

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

1 个答案: