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

我有一个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');
};

.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;
}

动画功能：

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');
};

.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;
}

CSS代码：

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');
};

.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;
}

---

因为不能使用CSS运行时变量，所以不能这样做。你可以做的是创建一个CSS动画，这并不意味着0%到100%的完成，也许是一个加载图标的动画。。在处理异步事务时，无法假定响应时间。也许这会有所帮助

您的问题可以简单地描述为有两个单独的、未来的条件，这两个条件都必须满足才能采取特定的行动。操作是“out”转换应该发生，其中一个条件是AJAX请求已经完成，另一个条件是“in”转换已经完成。这是

Promise

s非常适合的东西

想法是为两个条件中的每一个创建一个

承诺

，并在满足条件时解决它，然后在两个承诺都解决后触发“out”转换：

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

事件来表示“in”转换的条件已经满足

Promise.all（）。当这种情况发生时，将执行传递给
then（）
方法的回调函数，在本例中，它是从请求的成功回调中移出的
endAnimateCounters
函数

更多关于

Promises:

谢谢你的回复@Rodolfo:）我会调查的。