CODEWITHSUNDEEP
cssangular
hemmoleg
hemmoleg

Reputation: 184

How to run CSS animation while elements are added to page?

I have noticed that when angular updates a page by adding a lot of elements even CSS animations stop running. I created a stackblitz here https://stackblitz.com/edit/angular-fefvpa to highlight the issue. When you hit the "Add Elements" button, the red square stops moving for about half a second. What can I do to circumvent that?

Upvotes: 0

Views: 55

Answers (2)

Mihai T
Mihai T

Reputation: 17687

One solution i can think of that might help you is to use transform: translateX in the animation instead of left.

your anim would look like 

@keyframes mymove {
  from {transform: translateX(0)}
  to {transform: translateX(400px)}
}

You can also add transform:translateZ(0) to the #box itself

The animation will use less ' GPU ' and by adding transform:translateZ(0) you will also make the browser use more GPU for that animation. So it might run smoother.

I tested it on my pc and it doesn't ' freeze ' anymore when adding items.

Upvotes: 1

user4676340
user4676340

Reputation:

You can't really avoid that.

You're appending a thousand children, which is a rather important process.

This kind of operation should be done in small chunks, something like this.

Javascript is a monothread script language, which means most of the operations are blocking. When you do them one by one, then sure, it's pretty. But when you run a thousand operations at the same time (well, one after the other without any break), you face this kind of issues. Especially with DOM manipulation.

Upvotes: 0

Related Questions