Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 23.09.2018, 13:55
Интересующийся
Отправить личное сообщение для who_cares_? Посмотреть профиль Найти все сообщения от who_cares_?
 
Регистрация: 13.01.2017
Сообщений: 17

Вопрос про CSS анимацию, и ускорение её с помощью фреймворков (react,vue)
Всем привет!

Немного предыстории:
У меня стоит задача ускорения анимации в мобильном Chrome. Проект на JQuery, и анимация на нем же (.animate). Изначально обратил внимание на реактивные фреймворки, но быстро понял, что чтобы использовать их для ускорения рендеринга, придется весь проект переписывать, а он довольно большой. Потом обнаружил, что использование анимации с аппараным ускорением ( transform:translate() ) и css свойством will-change дает отличные результаты (по сравнению с тем что было). Однако все равно неприятно подтормаживает(

И собственно вопрос.
Могут ли фреймворки дать дополнительное ускорение анимации, в дополнение к css анимации. Вопрос только про аппаратно ускоряемую анимацию (transform, opacity). Или может, есть еще способы ускорить?

Вот пример кода:
<style>
div {
will-change: transform;
transform: scale(0.9);
transition: all .3s linear;
}

<script>
$(div).css({ transform:'scale(1.2)' }); // реакция на клик

Последний раз редактировалось who_cares_?, 23.09.2018 в 13:57.
Ответить с цитированием
  #2 (permalink)  
Старый 23.09.2018, 15:03
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,587

Фреймворки не могут - это просто способ писать тот же код. Встроенная CSS анимация - это максимально возможное ускорении. Быстрее только отказаться от DOM и рисовать всё в canvas.
__________________
29375, 35
Ответить с цитированием
  #3 (permalink)  
Старый 23.09.2018, 16:24
Интересующийся
Отправить личное сообщение для who_cares_? Посмотреть профиль Найти все сообщения от who_cares_?
 
Регистрация: 13.01.2017
Сообщений: 17

Aetae,
Спасибо! Но я не раз встречал утверждение, что React ускоряет именно рендеринг анимации. Но возможно, речь шла про анимации которые переписывают дерево DOM - width, margin и тд
Ответить с цитированием
  #4 (permalink)  
Старый 24.09.2018, 04:12
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Можно ли заккоментировать HTML и CSS с помощью JS? AlexKain Элементы интерфейса 6 10.06.2016 16:53
по основам CSS вопрос xfreewindx (X)HTML/CSS 10 09.04.2014 08:32
Всплытие событий или что то не так... Кирюха =) jQuery 6 30.03.2013 12:56
С помощью JS добавить к ссылкам картинку в CSS wlad2 Элементы интерфейса 7 16.10.2010 23:44