Когда HTML5 и CSS3 постепенно становятся мейнстримом, я очень привык к использованию JS для создания простых анимаций. Потому что в настольных браузерах не все поддерживают CSS3. Пользователи тоже очень странные. Не каждый пользователь может быть культивирован. Всегда есть много людей, которые думают, что win7.win8 не так полезен, как XP. Но мобильный телефон сильно отличается, и мобильный браузер очень хорошо поддерживает HTML5 и CSS3. Однако возможность обработки аппаратной обработки мобильных телефонов очень ограничена. Сегодня, когда четырехъядерные мобильные телефоны и восьмиъядерные мобильные телефоны широко распространены, все еще есть люди, которые используют двухъядерные или одноъядерные мобильные телефоны, такие как я. Хотя JS хорош, я не имею большого контакта с вами, поэтому я не могу настроить это чувство хорошо. Простые смахивания страницы очень плавно проходят на ПК i7, но он застрял, заикается, заикается, заикается и заикается на моем двухъядерном телефоне. Это очень удручает. По этой причине я также давно искал и много читал. Наконец, прежде чем я устроился, я нашел относительно простой метод: используйте CSS3 для выполнения анимации.
В прошлом, в дополнение к анимационным функциям jQuery, таким как анимация, SetTimeout и SetInterval, использовались для цикла для изменения поля, ширины, верхней и других свойств элемента. Именно это меня смущает.
Прежде всего, SetTimeout, SetInterval не может быть выполнен все время, просто установив 0 мс. Однажды я случайно обнаружил этот секрет во время отладки в Iscroll. Оказывается, расчет задержки таймера зависит от встроенных часов браузера, а точность часов зависит от частоты обновлений часов. Интервал обновления между IE8 и его предыдущими версиями IE составлял 15,6 миллисекунд. Все кончено, я думаю, что он выполняет 1PX -смещение за 10 мс, и он не может сделать это вовремя.
А что происходит с картой? Карта, потому что код не очень хорошо написан. В конце концов, JS однопоточный, и после того, как будут затратывающие много времени, пользовательский интерфейс может не ответить. Несмотря на то, что мы использовали Settimeout, именно потому, что SetTimeout заставляет нас выглядеть так, будто интерфейс не мертв, но действие не является гладким. Потому что после выполнения Settimeout на этот раз, до следующего выполнения, еще одно трудоемкое действие может быть встречено в среднем интервале, поэтому выполнение SetTimeout будет неограниченным. Тогда что? Карта! Тем не менее, есть еще одна причина, по которой карта может случайно запустить макет браузера (т.е. реле) при изменении исходного атрибута. Этот вопрос занимает много времени, но это трудоемкий. Это требует много времени, но его часто можно игнорировать. Но много раз это нельзя игнорировать.
В дополнение к двум вышеупомянутым параграфам, есть еще одна проблема, то есть во многих мобильных телефонах, всегда кажется, что это кадр за кадром, и это также может быть кадром за кадром длинным и коротким. Это ритм, который может испортить всех. Почему это происходит? Это все еще имеет какое -то отношение к задержке Settimeout. Отбросьте рамки. Эта проблема включает в себя частоту обновления монитора. Это действительно слишком сложно.
Наконец, CSS3 был выбран, JS динамически изменил атрибуты элемента, и переход использовался для управления временем выполнения анимации. Например:
Кода -копия выглядит следующим образом:
<div id = "test" style = "переход: все 1s легко; ширина: 100px;" >/div>
JS:
Кода -копия выглядит следующим образом:
$ ("#тест"). Ширина (200);
Таким образом, через 1 секунду ширина этого Div составит 200px. Не то чтобы Сан Вуконг становится больше в одно мгновение, и он медленно бросает ноги, не застряв и не останавливаясь. И есть преимущество в использовании анимации CSS, на нее не влияет трудоемкий JS. Хотя потоки пользовательского интерфейса и потоки JS являются взаимоисключающими в браузерах, это недопустимо для анимации CSS, и многие браузеры также могут включить аппаратное ускорение (например, Chrome). Несмотря на то, что в обычных ситуациях не очень очевидно, что в обычных ситуациях не очень очевидно, что следует избегать крупномасштабного повторного лайки. Так добавить -Webkit -transform: transtatez (0); или -webkit -transform: translate3d (0,0,0); так что браузер сделает этот слой независимо. Даже если повторный лайт неизбежен, область меньше. Это действительно очень мудрое решение использовать перевод для замены маржи.
Наконец, некоторые общие изменения будут вызывать свойства реле:
Кода -копия выглядит следующим образом:
ширина
высота
прокладка
допуск
отображать
ширина границы
граница
мин-высота
Выше всего, все контент, описанный в этой статье. Я надеюсь, что всем будет полезно изучить JavaScript и CSS3. В то же время, пожалуйста, добавьте несколько недостатков и поймите.