Angular 2 анимация vs css анимация - когда использовать что?

В настоящее время я тестирую анимацию angular2, и мне было интересно, какое конкретное преимущество они приносят за стандартные анимации/переходы css.

например. типичный материал, разработанный для карты и зависания с тенями коробки. Большинство фреймворков css используют: hover и css-переходы. Есть ли особенное преимущество при использовании анимаций angular 2?

Я где-то читал, что некоторые свойства анимации css не вызывают GPU столько, поэтому там что-то задерживается и отстает. Что относительно анимации angular2?

Ответ 1

Вопрос на самом деле больше анимации javascript vs css (потому что анимация angular2 основана на javascript-анимации).

Ответ заключается в том, что когда вы можете - использовать анимацию CSS.

Современные браузеры используют разные темы для анимации CSS, поэтому анимация CSS не влияет на javascript-поток.

Вы можете использовать тест скорости анимации HTML5, чтобы проверить предварительную настройку анимации VS CSS различных фреймворков (javscript-based) в вашем браузере.

В общем:

Браузеры могут оптимизировать потоки рендеринга. Таким образом, мы всегда должны пытаться создавать анимацию с использованием переходов/анимаций CSS, где это возможно. Если ваши анимации действительно сложны, вам, возможно, придется полагаться только на анимацию на основе JavaScript.

Если вы хотите точно знать анимацию angular2 - просто просмотрите элемент в своем браузере и проверьте, есть ли в анимации CSS (переходный/анимационный фрейм или javascript (вы сможете увидеть значения в style изменение атрибута во время анимации).

Ответ 2

Ответ на самом деле находится в документах:

https://angular.io/guide/animations

Система анимации
Angular позволяет создавать анимации, которые запускаются с помощью такой же родной производительности, найденный в чистых анимациях CSS. Ты можешь также плотно интегрируйте свою анимационную логику с остальной частью вашей код приложения для простоты управления.

Он также абстрагирует необходимость отслеживать длины анимаций, чтобы шататься и избегать перегрузки браузера или цепочки анимации.

Как правило, если у вас простая мелочь, CSS, вероятно, проще. Но если вы последовательно выполняете анимацию в своем приложении, вы получаете много энергии с небольшой стороны от анимации Angular.