Угловое состояние анимации производительности / переход против запроса

Question

Я сейчас работаю с угловой анимацией.Поэтому я нашел два возможных способа прикрепления анимации к компонентам.Далее я описываю их как анимации состояний / переходов и анимации запросов.

В этом вопросе я в основном хочу узнать, есть ли разница в производительности при переходе на тот или иной путь!?

---

1.Анимации состояния / перехода

.html

<div [@animation_foo]/>

.ts

trigger('animation_foo', [
    state('true', style({...}),
    state('false', style({...})       
    transition('true => false', animate(...)
]

---

2.Анимации запросов

.html

<div [@animation_foo]>
    <div class="bar"/>
</div>

.ts

trigger('animation_foo', [
    query('.bar', style({...}), animate('10ms', style({...}))
]

---

Дальнейшие мысли:

• Моя главная касающаяся с точкой 2.Запрос таков:

  1. Если у вас не один, а несколько запросов, которые объединяются через группу (...) и селектор css собирается найти элементы на более глубоком уровне ( '. Foo>: nth-child (n + 3) .bar' ) вам нужно выполнить итерации по очень большой части дерева DOM.
  2. Стили и анимация, примененные кэлементы происходят после нахождения элемента и перед анимацией - каждый раз - потому что я ожидаю, что он не может быть предварительно скомпилирован компилятором?

• Environment / Targetплатформа: Я знаю, что это может не иметь отношения к случайному веб-приложению, но я пытаюсь представить большие корпоративные приложения с несколькими маршрутизаторами, вложенными компонентами и множеством ngFors ngIf, так что я лично могу представить, что запрашивает все, чтопотребуются некоторые усилия.

• Браузер: Я знаю, что браузер по-разному ведет себя по-разному.Лично меня интересует только Chrome на данный момент - но ради сообщества общий ответ был бы замечательным.

Если у вас есть какая-либо дополнительная информация, которую важно отметить, было бы неплохо поделиться (баги, ...)

Answer 1

Angular использует веб-анимацию api , поэтому он не меняет свойства стиля с помощью JavaScript и, следовательно, довольно производительный.Вы можете проверить производительность различных фреймворков анимации (на основе javascript) и CSS с помощью теста HTML 5 Animation Speed ​​.

Поэтому производительность в разных браузерах зависит от совместимости браузера с веб-анимациями api (к сожалению, этот раздел еще не поддерживается).Но, согласно комментарию здесь , он еще не полностью поддерживается всеми распространенными браузерами и заполняется для Edge / Safari.