CODEWITHSUNDEEP
javascriptcss
Shawn
Shawn

Reputation: 1183

Javascript: How do I target transition time?

I created a css3 animation that acts like a timebar. When the time bar ends (or the animatino finishs), the player should be able to select skills to use.

The problem I'm having at the moment is created code that will give me the option to specifically target the time and alter it at will, since i'm using short hand code for the CSS animation.

function timeBar (el, color) {
    var elem = document.getElementById(el);
    elem.style.transition = "width 6.0s, linear 0s";
    elem.style.background = color;
    elem.style.width = "0px";
}

As you can see, the bar fills up at 6 seconds, but how can I write code that will let me specifically target and change just the time and leave the rest of the short hand by itself? I'm asking because I want to influence other skills like timestop or timeslow, ect.

Thank you for the JQuery but i'm trying to do this without it atm, still learning javascript.

Upvotes: 0

Views: 165

Answers (1)

griffin
griffin

Reputation: 1258

elem.style["transition-duration"]

is the property you probably want to modify. Keep in mind that you'd have to use prefixes to make this work as cross browser as possible, e.g. "-webkit-transition-duration" etc.

Also there's a nice jQuery plugin to do that if you want: http://ricostacruz.com/jquery.transit/

Edit: I originally put the jQuery suggestion in because the question was (wrongly) tagged with jQuery, but of course you can just modify the stated property directly.

Upvotes: 1

Related Questions