在 javascript 中更改 ajax 之后的动画类的最佳实践

Question

我有一个应用程序，它执行ajax请求并在元素上设置一个类，这反过来又会改变背景颜色并进行小规模的转换。 我正在使用 Vue.jserroredSave属性是设置类的属性。

相关代码如下：

this.erroredSave = false
this.$http.post('some/url/', params)
.then((data) => {
// ALL GOOD
})
.catch((errors) => {
this.erroredSave = true
})

如果我一遍又一遍地执行该过程，动画通常不会发生，因为请求执行速度非常快，我认为 JS 没有完全取消设置类所需的时间。 我认为。。。

在执行请求之前，我必须设置一个小的超时延迟，否则 css 动画将不会发生。

所以我的代码最终是：

this.erroredSave = false
setTimeout(() => {
this.$http.post('some/url', params)
.then((data) => {
// ALL GOOD
})
.catch((errors) => {
this.erroredSave = true
})
}, 10)

我不确定为什么需要设置超时。 谁能告诉我为什么？ 对于这类事情，是否有标准/更好的做法？

编辑

错误元素的 SCSS。 这实际上是在表行上执行的，如果这有任何区别的话。

&.error_row
{
background: linear-gradient(#ffe0e0 10%, #ffcccc 100%) !important;
animation: scaleSuccess 0.25s linear;
transform-origin: center center;
color: $red;
@keyframes scaleSuccess {
50%
{
transform: scale(1.05);
}
100%
{
transform: scale(1);
}
}
}

动画在第一校准时会触发。 但是，导致错误的任何其他调用都需要小超时才能看到动画执行。

Answer 1

类似的事情曾经发生在我身上，解决方案是使用transitions而不是animations.

当您删除/添加动画时，更改会突然发生，但是对于过渡，它们将采用当前应用于元素的任何 CSS 值 - 即使它发生在另一个过渡的中间 - 从那里开始并过渡到您想要的 CSS 最终值。

因此，例如，如果您在 ajax 请求之前更改背景颜色，然后在请求结束时再次更改它，如下所示：

$(".ajax-call").click(function(event){
$('body').removeClass().addClass("ajax-ongoing");
$.ajax({
type: 'POST',
dataType: 'json',
url: '/echo/json/',
data : { json: JSON.stringify( jsonData ) },
success: function(data) {
$('body').addClass("ajax-success");
} 
});
});

您可以使用过渡和过渡延迟设置 CSS 类，如下所示：

body{
background-color: white;
}
body.ajax-ongoing{
background-color: orange;
}
body.ajax-success{
transition-delay: 1s;
transition: all 0.7s ease-in;
background-color: green;
}

你可以在这里看到一个活生生的例子

过渡将很好地与您的转换配合使用：scale(n)。