Question

我有一个API调用，它以30秒的间隔获取数据，并且我对要更新的元素进行了转换，以便用户可以看到它何时更新..

问题在于API调用过快完成，无法实现平滑且漂亮的CSS过渡元素。

无论API调用是否更快地返回数据，我如何“强制”完成动画？

API调用函数：

function forceUpdateCount() {
        startAnimateCounters();
        var urlForCount = 'api/Order/GetOrderStatusCount';
        $.ajax({
            type: 'GET',
            url: urlForCount,
            success: function (data) {
                countmodel.nrOfNewOrders(data.countNewOrders);
                countmodel.nrOfInProgress(data.countInProgress);
                countmodel.nrOfReadyForPickup(data.countReadyForPickup);
                countmodel.nrOfInTransport(data.countInTransport);
                countmodel.nrOfCompleted(data.countCompletedOrders);
                countmodel.nrOfCancelled(data.countCancelledOrders);
                countmodel.lastUpdated(getLastUpdated());

                endAnimateCounters();
            },
            error: function (e) {
                console.log(e);
            },
            dataType: "json",
            contentType: "application/json"
        });
    }

动画功能：

function startAnimateCounters() {
    $('.count-body.slateblueish').addClass('whiteanimated');
    $('.count-body.yellowish').addClass('whiteanimated');
    $('.count-body.slategreenish').addClass('whiteanimated');
    $('.count-body.beigeish').addClass('whiteanimated');
    $('.count-body.greenish').addClass('whiteanimated');
    $('.count-body.redish').addClass('whiteanimated');
};

function endAnimateCounters() {
    $('.count-body.slateblueish').removeClass('whiteanimated');
    $('.count-body.yellowish').removeClass('whiteanimated');
    $('.count-body.slategreenish').removeClass('whiteanimated');
    $('.count-body.beigeish').removeClass('whiteanimated');
    $('.count-body.greenish').removeClass('whiteanimated');
    $('.count-body.redish').removeClass('whiteanimated');
};

CSS代码：

.yellowish {
    -moz-transition: all .1s ease-in;
    -o-transition: all .1s ease-in;
    -webkit-transition: all .1s ease-in;
    transition: all .1s ease-in;
    background-color: #ffef96;
}

.whiteanimated {
    -moz-transition: all .1s ease-in;
    -o-transition: all .1s ease-in;
    -webkit-transition: all .1s ease-in;
    transition: all .1s ease-in;
    background: #ffffff!important;
}

Answer 1

由于您无法使用CSS运行时变量，因此无法执行此操作。你可能做的是创建一个并不意味着完成0％到100％的CSS动画，也许是一个带有动画的加载图标..当你处理异步事件时，那里没有假设响应时间的方式。也许这可以帮助https://icons8.com/preloaders/

Answer 2

您的问题可以简单地描述为具有两个必须满足的未来条件，以便进行特定的操作。行动是＆＃34; out＆＃34;转换应该发生，其中一个条件是AJAX请求已经完成，另一个条件是＆＃34; in＆＃34;过渡已经完成。这是Promise非常适合的。

我们的想法是为这两个条件中的每一个创建一个Promise，并在满足条件时解决它，然后触发＆＃34; out＆＃34;两个承诺都已解决的转变：

function forceUpdateCount() {

    // Create a promise that gets resolved when the transition has completed
    var transitionPromise = new Promise(function(resolve) {
        $('.count-body.yellowish').one('transitionend', resolve);
    }

    startAnimateCounters();
    var urlForCount = 'api/Order/GetOrderStatusCount';

    // $.ajax() already returns a promise, we'll use that
    var requestPromise = $.ajax({
        type: 'GET',
        url: urlForCount,
        success: function (data) {
            countmodel.nrOfNewOrders(data.countNewOrders);
            countmodel.nrOfInProgress(data.countInProgress);
            countmodel.nrOfReadyForPickup(data.countReadyForPickup);
            countmodel.nrOfInTransport(data.countInTransport);
            countmodel.nrOfCompleted(data.countCompletedOrders);
            countmodel.nrOfCancelled(data.countCancelledOrders);
            countmodel.lastUpdated(getLastUpdated());
        },
        error: function (e) {
            console.log(e);
        },
        dataType: "json",
        contentType: "application/json"
    });

    // Wrap both promises with Promise.all() to get a new promise that resolves when both of the wrapped promises have resolved
    Promise.all([ transitionPromise, requestPromise ]).then(endAnimateCounters);
}

我们在其中一个动画元素上使用transitionend事件来表示＆＃34; in＆＃34;转型已经实现。

Promise.all()获取承诺列表并返回一个新的承诺，当列表中的所有承诺都已解决时，该承诺将得到解决。当发生这种情况时，传递给then()方法的回调函数会被执行，在我们的例子中是我们移出请求的成功回调的endAnimateCounters函数。

有关Promise s：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

的更多信息

强制CSS转换在API调用的开始和结束时完成。现在它只是快速闪烁

2 个答案: