0

I can add a CSS class to each element by iterating them, but is it possible to add the class to all of them at the same time?

Example: Suppose I have 3 elements, when I add the class to 1st element the change would reflect the 1st element only and not the other two. I want it to wait until the same class has been added to other two elements too.

Right now I am doing this:

card1.classList.add('animated', 'rubberBand');
card2.classList.add('animated', 'rubberBand');

But animation for card1 will happen as soon as it is added right? Or my understanding of the reflow is wrong?

Kate Orlova
  • 3,225
  • 5
  • 11
  • 35
RGog
  • 96
  • 12
  • 1
    Hello, please, read [ask] and also [mcve], then [edit] your question fo fulfill the stackOverflow requirements to your question be on-topic and focused – Calvin Nunes Feb 27 '20 at 13:34
  • 1
    The browser doesn't re-render every time you add a class to an element. It will batch the updates up anyway. To add the same calss to multiple elements you will need to iterate through the collection anyway. – Terry Feb 27 '20 at 13:35
  • ohh, didnt know about the batches. but how long does it hold up ? – RGog Feb 27 '20 at 13:39
  • Browsers are very fast at iteration: unless you're adding a class to tens or hundreds of thousands of DOM elements, you shouldn't worry about that. – Terry Feb 28 '20 at 09:32
  • _“but is it possible to add the class to all of them at the same time?”_ - that is not even _necessary_, if you actually use CSS with a bit of “cleverness” … Add one single class to a common parent element, and use the descendant combinator in your stylesheet to create a rule that affects _all_ of your target elements based simply on that. – CBroe Feb 28 '20 at 09:34

0 Answers0