我想在宽度不为0时为div设置动画

Question

I am having this problem I want to animate the div from 100% to 0 using velocity js. I want it to animate every time the width not equal 0. The width of the div is updated automatically using setInterval process. This interval process is running forever and will update the width of the div every 3 seconds. The function of velocity js or other animation plugin is to just make it 0% in width.

My code is something like this.

    // THIS IS A BIDDING PROCESS

var progressBar = $("#progressBar");
var scenario = 3
var width = 265;
var processDuration = 60000;
var processDelay = 3000;
var time_per_scenario = (processDuration / scenario);
var width_per_processDelay = (width / (processDuration / processDelay));

// Call the  animateProgressBar for first time animation;
animateProgressBar();

setInterval(function(){
    if(scenario != 0) {
         if(time_per_scenario != 0) {
            time_per_scenario -= 1000;
            width -= width_per_processDelay;
         } else {
            scenario--;
            width = 265;
            time_per_scenario = 20000;
            animateProgressBar();
         }
    } else {
        scenario = 3;
    }
}, processDelay);

function animateProgressBar() {

    progressBar.attr("style", "width: " + width);

    console.log("animateProgressBar Again with scenario: " + scenario);

    if(scenario == 0 ) {

        progressBar
        .velocity({ width: width}, { duration: 1 })
        .velocity({ width: 0 }, { duration: time_per_scenario })
        .velocity({ width: width }, { duration: 1 })
        .velocity({ width: 0 }, { duration: time_per_scenario, })
        .velocity({ width: width}, { duration: 1 })
        .velocity({ width: 0 }, { duration: time_per_scenario, });

    } else if(scenario == 1 ){
        progressBar
        .velocity({ width: width }, { duration: 1 })
        .velocity({ width: 0 }, { duration: time_per_scenario, })
        .velocity({ width: width}, { duration: 1 })
        .velocity({ width: 0 }, { duration: time_per_scenario, });
    } else {
        progressBar
        .velocity({ width: width }, { duration: 1 })
        .velocity({ width: 0 }, { duration: time_per_scenario });
    }
};

The problem with velocity js is that it just animate 1 time even if it is inside the setInterval process it wont do the animation. Why is it happening?

Answer 1

Finally found the solution.

 // THIS IS A BIDDING PROCESS var progressBar = document.getElementById("progressBar"); var scenario = 3 var width = 265; var processDuration = 60000; var processDelay = 3000; var time_per_scenario = 20000; var width_per_processDelay = (width / (processDuration / processDelay)); var process = null; // Call the animateProgressBar for the first animation; animateProgressBar(); setInterval(function(){ //console.log("time_per_scenario: " + time_per_scenario); time_per_scenario -= 3000; width -= width_per_processDelay; },3000); setInterval(function(){ if(scenario != 0) { if(time_per_scenario <= 0) { clearInterval(process); scenario--; width = 265; time_per_scenario = 20000; animateProgressBar(); } } else { scenario = 3; } }, processDelay); function animateProgressBar() { var widthAnimation = width; var width_per_frame = (width / (time_per_scenario / 5)); //console.log("animateProgressBar Again with scenario: " + scenario); process = setInterval(frame, 5); var me = this; function frame() { if (widthAnimation <= 0) { clearInterval(process); } else { widthAnimation = widthAnimation - width_per_frame; progressBar.style.width = widthAnimation + 'px'; } } }; 

 #progressBar { height: 20px; background-color: #ccc; } 

 <div id="outerDiv"> <div id="progressBar"></div> </div> 

Thanks for the help @toddmo