时间戳

首页 > 解决方案 > How to run CSS animation while elements are added to page?

css - 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?

标签： cssangular

解决方案

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.

推荐阅读