угловая анимация 2 против vss-анимация - когда использовать что?

Я в настоящее время испытываю анимацию angular2, и мне было интересно, какое конкретное преимущество они приносят за стандартные анимации/переходы css.угловая анимация 2 против vss-анимация - когда использовать что?

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

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

источник

2016-12-03 Han Che

Ну, я мало знаю об Угловом, но я думаю, что они просто используют анимацию CSS. [На самом деле их документы говорят] (https://angular.io/docs/ts/latest/guide/animations.html): * «Система анимации Angular позволяет создавать анимации, которые запускаются ** с той же самой родной производительностью * * найден в чистых анимациях CSS. * *. Они также указывают, что они используют [веб-анимацию] (https: //w3c.github.io/web-анимация /), где [возможно] (http://caniuse.com/#feat=web-animation). Это первый хит, когда вы google для «угловой анимации 2» – GolezTrol

Я считаю, что анимация angular2 просто создает анимацию css при компиляции. Преимущество заключается в том, что легче добавлять и управлять анимацией на уровне компонентов. –

спасибо за быстрый ответ, так что в основном то, что я получаю с угловыми анимациями 2, - это методы (например, animat() и style()), которые делают анимацию более управляемой (?) –

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

Ответ: если вы можете - использование CSS анимация.

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

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

В общем:

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

Если вы хотите знать, в частности, в отношении анимации Angular2 - просто проверить элемент в вашем браузере и проверьте, если анимация есть CSS (переход/animationFrame основы или Javascript (вы сможете увидеть значение в . style изменение атрибутов во время анимации)

источник

2016-12-03 15:28:33 Dekel

Это хорошо, но хотя Angular является JavaScript, я думаю, что он все еще использует CSS для анимации. Здесь нет эксперта, но ссылки, о которых я упоминал в своем предыдущем комментарии, кажутся ясными. – GolezTrol

@GolezTrol, проверьте обновление с 1 мин. Назад до моего ответа :) объясняет, как проверить, является ли анимация угловым2 основанием css или js. – Dekel

ответ на самом деле в документации:

https://angular.io/guide/animations

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

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

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

источник

2017-09-27 15:48:31 jkyoutsey

угловая анимация 2 против vss-анимация - когда использовать что?

ответ

Смежные вопросы