Как запустить анимацию CSS при добавлении элементов на страницу?

Question

Я заметил, что когда angular обновляет страницу, добавляя много элементов, даже анимация CSS перестает работать.Я создал стекаблиц здесь https://stackblitz.com/edit/angular-fefvpa, чтобы выделить проблему.Когда вы нажимаете кнопку «Добавить элементы», красный квадрат перестает двигаться примерно на полсекунды.Что я могу сделать, чтобы обойти это?

Answer 1

Одно из решений, которое мне может помочь, - это использовать transform: translateX в анимации вместо left.

Ваш аним будет выглядеть как

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

Вы также можете добавить transform:translateZ(0) к #box

Для анимации будет использоваться меньше «GPU», и, добавив transform:translateZ(0), вы также заставите браузер использовать больше GPU для этой анимации. Так что, может, все пройдет гладко.

Я протестировал его на своем компьютере, и он больше не зависает при добавлении элементов.

Answer 2

Вы не можете этого избежать.

Вы добавляете тысячу детей, что является довольно важным процессом.

Эта операция должна выполняться небольшими порциями, примерно так .

Javascript - это язык сценариев с одной нитью, что означает, что большинство операций блокируется. Когда вы делаете их один за другим, тогда, конечно, это красиво. Но когда вы выполняете тысячу операций одновременно (ну, один за другим без перерыва), вы сталкиваетесь с подобными проблемами. Особенно с манипуляциями DOM.