CODEWITHSUNDEEP
htmlcss
needhelpwithR
needhelpwithR

Reputation: 283

Dynamic CSS styles for numbered styles

I have four animations with various delays. Specifically, I have four CSS styles, each one for each delay.

They are:

.delay-1, .delay-2, .delay-3, .delay-4. So the format is .delay-[number]. Each of which has a delay of number*400ms. Is it possible to have some kind of function that allows me to dynamically set the delay? So if I had .delay-6, the delay would be 6*400ms or 2400ms.

I cannot seem to find anything on Google or stackoverflow for this. Perhaps I am querying for the wrong thing/using the wrong wording.

I would prefer to do this with pure CSS if possible.

Upvotes: 1

Views: 51

Answers (1)

Ihor Herasymchuk
Ihor Herasymchuk

Reputation: 118

Well, assuming that naming convention is .delay-[number] I wrote a function which calculates delay for a particular class and set css property 'animation-delay' of clicked class to calculated delay. lets say if you click on class .delay-6 the animation-delay property of that class will be set to 2400ms. 

$('[class^="delay-"]').click(function(){
  var num = this.className.replace(/[^0-9]/g, '')
  var delay = num * 400+'ms';
  this.style.animationDelay = delay;
  console.log("delay for class " + this.className+ " is " + delay);
});

You can adjust this method according to your usecase. I don't know what should trigger the delay calculation in your case so made it on click.

Here is a jsbin so you can play with it: http://jsbin.com/jumomayapo/edit?html,css,js,console,output

Hope this helps.

Upvotes: 1

Related Questions