CSS3 против Javascript только трансформирует - PullRequest
0 голосов
/ 15 марта 2012

Под впечатлением от демонстрации Apple Safari 360 https://developer.apple.com/safaridemos/threesixty.php

Кажется, он работает и в Firefox.

Может ли кто-нибудь обобщить плюсы и минусы использования CSSonly против javascript для анимации и трансформации?

1 Ответ

3 голосов
/ 15 марта 2012

Мое личное мнение состоит в том, что, используя дом в качестве аналогии, HTML предназначен для закладки фундамента, CSS - для покраски помещений, а JS - для ремонта. Если вы хотите добавить водный объект, CSS будет отвечать за его внешний вид, но именно JS заставит воду двигаться через него.

Точно так же я мог бы сделать часы, используя CSS, и заставить их вращаться, используя простую анимацию CSS (продолжительностью 12 часов для часовой стрелки, 1 час для минутной стрелки и 1 минуту для секундной стрелки), но я бы сильно лучше сделайте это на JavaScript, так как JS сможет проверять часы пользователя и поддерживать синхронизацию. В частности, это важно, если браузер зависает из-за того, что пользователь слишком много открывает на своем компьютере, или просто из-за старого компьютера.

Кроме того, я почти уверен, что CSS должен переоцениваться несколько сотен раз в секунду для анимации, в то время как с помощью JS вы можете явно установить частоту кадров на более приемлемую величину, такую ​​как интервал 250 мс для 4 кадров в секунду. (более чем достаточно для часов и индикаторов) или 25 мс (40 кадров в секунду) для более продвинутой анимации (иногда используется на моих сайтах, поскольку они являются играми). С помощью такого контроля вы можете управлять эффективностью своего сайта и т. Д.

С другой стороны, CSS-преобразования очень полезны, потому что они влияют на внешний вид элемента, как и должно делать CSS. Затем, используя JS для управления ими, можно создавать очень сложные анимации с минимальным кодом (например, в вышеупомянутой игре есть целая последовательность, которая была бы совершенно невозможна в чистом CSS, но в JS она очень проста с использованием CSS-преобразований). ).

Все дело в использовании правильного инструмента для правильной работы.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...