使用动画时，CS转换不会转换回原始状态

Question

我正在尝试制作一个加载动画。我使用css转换通过缩放转换到加载，然后使用动画来缩放x轴。但当我试图转换回原始状态时，它不再使用转换，它只是快速恢复。我可以使用动画来完成整个过程，但我想考虑到页面继续加载，所以我不想写额外的javascript逻辑来处理它。如果它能自己转换就好了。

当您第一次单击以下片段时，它工作正常。但当你再次单击它时，它只会恢复到原始状态，而不会使用转换。如果在动画部分中使用不同的属性(如不透明度(，则效果良好，因此我假设浏览器存在无法识别当前缩放值的情况。这是bug还是我做错了什么？

document.querySelector('.wrapper').addEventListener('click', () => {
document.querySelector('.wrapper').classList.toggle('loading')
})

.wrapper{
position:fixed;
top: 0;
left: 0;
width:  100%;
height: 100%;
}
.wrapper > div{
color: white;
display:flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
background: blue;
transition: transform 500ms ease-out;
transform: scale(1);
}
.wrapper.loading > div{
transform: scale(0.2, 0.002);
animation: loading 1000ms ease-out infinite;
animation-delay: 500ms;
}
@keyframes loading {
0%{
transform: scale(0.2, 0.002)
}
50%{
transform: scale(0.5, 0.002)
}
100%{
transform: scale(0.2, 0.002)
}
}

<div class="wrapper">
<div>click me</div>
</div>

Answer 1

TL；DR

我相信这种情况的发生是因为CSS转换最终给了一个类两个状态和它们之间的转换，当你删除你的类时，你不会改变它的状态，你会删除它。我的解决方案是添加另一个类来设置它。

---

CSS转换通过使用CSS为对象定义两种状态来工作。在您的情况下，您定义对象在具有类"时的外观；加载"；并且你定义了当它没有类"时它的外观；保存"；(看起来很正常(。当您删除类"时；加载"；，它将根据对象的转换设置转换到另一个状态；加载"；班

如果CSS转换设置应用于对象(没有"加载"类(，那么它们将应用于两个转换。

你的转换CSS设置只适用于.saved，因此当你删除它时，没有控件可以指定CSS设置。您可能需要添加另一个类"；。"褪色"；您可以在该类上指定CSS转换设置，以便它们始终有效。

Answer 2

我不知道有什么纯css修复程序。

但是，您可以添加一个不同的类，该类具有恢复到以前使用JS 的动画

const wrapper = document.querySelector(".wrapper");
wrapper.onclick = () => {
if ([...wrapper.classList].includes("loading")) {
wrapper.classList.add("restore");
} else {
wrapper.classList.remove("restore");
}

wrapper.classList.toggle("loading");
};

.wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.wrapper>div {
color: white;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
background: blue;
animation: none;
transform: scale(1);
transition: transform 500ms ease-out;
}
.wrapper.restore>div {
animation: restore 500ms ease-out;
}
.wrapper.loading>div {
transform: scale(0.2, 0.002);
animation: loading 1000ms 500ms ease-out infinite;
}
@keyframes restore {
0% {
transform: scale(0.2, 0.002);
}
100% {
transform: scale(1);
}
}
@keyframes loading {
0% {
transform: scale(0.2, 0.002)
}
50% {
transform: scale(0.5, 0.002)
}
100% {
transform: scale(0.2, 0.002)
}
}

<div class="wrapper">
<div>click me</div>
</div>

Answer 3

您可以使用动画迭代计数属性：

div {
animation-iteration-count: 2;
}

或者使用填充模式在末尾冻结动画：

-webkit-animation-fill-mode: forwards;