Принудительно завершить переход CSS в начале и в конце вызова API.Теперь просто быстро мерцает - PullRequest
Новая
       3

Принудительно завершить переход CSS в начале и в конце вызова API.Теперь просто быстро мерцает

0 голосов
/ 24 апреля 2018

У меня есть 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;
}

Ответы [ 2 ]

0 голосов
/ 26 апреля 2018

Ваша проблема может быть просто описана как наличие двух отдельных будущих условий, которые должны быть выполнены, чтобы выполнить определенное действие. Действие состоит в том, что должен произойти переход «вне», одно из условий состоит в том, что запрос AJAX завершен, а другое условие - в том, что переход «в» завершен. Это то, для чего Promise очень хорошо подходят.

Идея состоит в том, чтобы создать Promise для каждого из двух условий и разрешить его при выполнении условия, а затем запустить переход "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 на одном из анимированных элементов, чтобы сигнализировать о том, что условие перехода «в» выполнено.

Promise.all() берет список обещаний и возвращает новое обещание, которое разрешается, когда все обещания в списке разрешены. Когда это происходит, выполняется функция обратного вызова, переданная методу then(), которая в нашем случае является функцией endAnimateCounters, которую мы переместили из обратного вызова успешного выполнения запроса.

Подробнее о Promise с: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

0 голосов
/ 24 апреля 2018

Поскольку вы не можете работать с переменными времени выполнения CSS, вы не можете этого сделать.Что вы можете сделать, это создать CSS-анимацию, которая не означает выполнение от 0% до 100%, возможно, значок загрузки с анимацией. Когда вы имеете дело с асинхронными вещами, нет способа предположить время отклика.Может быть, это может помочь https://icons8.com/preloaders/

...