将一些 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
属性在这里对可能的解决方案有任何意义吗?
最佳答案
如您所见,transition
不适用于animation
。
因此解决方案很简单,将您的 trigger-*
动画重命名为 trigger-open-*
并创建相应的 trigger-close-*
动画。
然后每次添加open-*
类时,移除close-*
类。
每次删除 open-*
类时,添加 close-*
类。
这是你的 jsfiddle 修复。 https://jsfiddle.net/pu5y8quz/
关于javascript - 删除类后 CSS 转换不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41732887/