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

类似的事情发生在我身上，解决方法是使用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;
}

您可以看到实时example here

转换适用于您的转换：scale（n）也适用。

javascript

1 个答案: