animating the progress bar

[jotasgarcia]

Hi,

I have some slides with transitions, one of them includes your progressbar:

http://jsfiddle.net/jotasgarcia/hk8kfo0r/

When you run the code you will see the animtation. I want to know how to fire the animation everytime the progress bar is shown and not just the first time.

Can you please help me?

[crisbeto]

You can reset your current progress to 0 and then re-animate it when the slide becomes visible again.

[jotasgarcia]

Yes, but I dont know how to re-animate the progressbar. If I change the current value it displays it but with no animation.

[crisbeto]

Not sure what you mean, the value should get animated every time you change it.

[jotasgarcia]

The value or animation of the progress filling is done once it is a slide changed and it returns to the slide where the progress is only done when one reloads the rest page does not do it again, and what I need is that If you re-animate the value and fill in the progress once you are back on the slide you can help me please with the code this is the code that I have : http://jsfiddle.net/jotasgarcia/hk8kfo0r/

[jotasgarcia]

The value or animation of the progress filling is done once it is a slide changed and it returns to the slide where the progress is only done when one reloads the rest page does not do it again, and what I need is that If you re-animate the value and fill in the progress once you are back on the slide you can help me please with the code this is the code that I have : http://jsfiddle.net/jotasgarcia/hk8kfo0r/

[crisbeto]

Sorry, I've been pretty busy. What is happening in your slider is that you render the progress bar once and you hide it afterwards. You need to reset the current value in order to reboot the animation. Here's a forked fiddle that shows what you want to achieve. The only changes that I've done is to add the following to the beforeChange event. Note that you'll probably need to change up the logic if you add more slides, but it should be enough to get the idea:

$scope.$apply(function() {
  $scope.current = currentSlide === 0 ? 0 : 80;
});

[jotasgarcia]

Great! Thank you very much : )