javascript - 在 JavaScript 中使用 ajax 后更改动画类的最佳实践

Question

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

相关代码如下:

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)

我不确定为什么需要 setTimeout。谁能告诉我为什么？对于此类事情是否有标准/更好的做法？

编辑

错误元素的 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

类似的事情曾经发生在我身上，解决方案是使用过渡而不是动画。

当您删除/添加动画时，更改会突然发生，但是通过过渡，它们将采用当前应用于元素的任何 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;
}

可以看直播example here

过渡也可以与您的转换配合使用:scale(n)。