ReactJS и CSS анимация: инструкция к применению
Оглавление
Перед каждой современной IT-компанией рано или поздно возникает задача анимации страниц. На дворе 21 век и по-другому никак. В зависимости от степени тривиальности задачи, мы всегда стараемся найти библиотеку (или решение), предоставляющую максимальный спектр возможностей.
При этом полученный опыт настойчиво подсказывает нам одно простое правило: стандартное — значит, лучшее. Как минимум, в большинстве случаев. Мы многократно сталкивались с ситуациями, когда оптимальное решение буквально лежит под боком. Поэтому давайте будем двигаться от простых задач к сложным, требующим подключения дополнительных библиотек. Ведь наша цель — не только качественная анимация, но и оптимизация бизнес-процессов.
Далее мы рассмотрим основные технологии создания анимации, выделим их ключевые особенности и приведем примеры использования.
1. CSS анимация
CSS transitions
Его основное отличие от классического CSS animations состоит в том, что он применяется для переходов.
То есть анимируется один раз. Что это значит?
К примеру, мы указываем некоторое свойство, которое будет анимироваться с помощью специальных CSS-правил. При изменении этого свойства, браузер обработает анимацию, но только один раз. Если же нам надо анимировать определенное, вплоть до бесконечности, количество раз, на помощь приходит CSS animations. Здесь мы приведем небольшой стандартный пример. Более подробно вы можете ознакомиться с ним в этой статье.
Вообще возможность связывать анимации с использованием CSS transition можно посредством обработчика на событие transitionend. Но мы этого делать не рекомендуем, так как keyframes (css animation) намного проще в использовании.
Через transition-property мы указываем, какое свойство будет анимироваться. В нашем случае это background-color.
Далее transition-duration указывает на продолжительность анимации (3 секунды).
Теперь любое изменение фонового цвета у этого класса будет анимироваться в течение 3 секунд.
Также заметим, что через ключевое слово transition можно указать через пробел все параметры по порядку. Их мы рассмотрим ниже.
Transition-property — здесь можно указать почти любое CSS свойство, например, margin-left, padding-right, opacity и т.д.
Transition-duration — продолжительность анимации, задается в s (секундах) или ms (миллисекундах).
Transition-delay — время задержки анимации.
Transition-timing-function — временнáя функция, определяющая как процесс анимации будет распределен во времени. Например, будет ли она постепенно ускоряться или замедляться. Самые популярные параметры: ease, ease-in, ease-out, ease-in-out. Также упомянем функцию steps (количество шагов[, start/end]), которая разбивает нашу анимацию на четкое количество шагов. Она используется в основном для исключения плавных переходов (пример: счетчик чисел).
Пример:
CSS animation
Заканчиваем с простыми анимациями и переходим к технологии CSS animation.
Что она собой представляет и в чем ее отличия?
Сложные анимации создаются объединением простых с помощью CSS-правила @keyframes. В нем мы задаем «имя» анимации и правила: что, откуда и куда анимировать. Правило @keyframes содержит имя элемента, связывающее его с блоком объявления элемента. Keyframes кадры создаются с помощью ключевых слов “from” и “to” (эквивалентны значениям 0% и 100%) или с помощью процентных пунктов. Их количество не ограничено: задавайте сколько угодно. Также можно комбинировать ключевые слова и процентные пункты. Если кадры имеют одинаковые свойства и значения, их можно объединить в одно объявление:
Если кадры 0% или 100% не указаны, то браузер пользователя создает их, используя вычисляемые (первоначально заданные) значения анимированного свойства. Если у двух ключевых кадров будут одинаковые селекторы, то последующий отменяет действие предыдущего.
Затем при помощи свойства animation: эта анимация подключается к элементу: задаются ее имя, время, дополнительные параметры и способ их применения.
Пример:
— (1) Имя анимации. Тут мы можем указать любое имя, соответствующее нашему имени в @keyframes. По сути оно будет обращаться туда. В приведенном примере мы указали все параметры в одну строчку. Для уточнения добавим: последний alternate указывает на то, что каждый раз анимация будет менять свое направление.
— (2) В @keyframes блоке мы указываем способ анимации. В данном случаем это будет смещение на определенное число пикселей.
Animate.css
Случаются моменты, когда нам предстоит применять нестандартные переходы, включающие в себя несколько простых анимаций. К счастью, их не приходится писать вручную. Существуют готовые эффекты под стандартные задачи. К примеру: мерцание, появление сверху/снизу, и т.д. С полным списком таких эффектов можно ознакомится здесь.
Теперь о том, как они будут выглядеть на практике. Установка и подключение описывается на официальном сайте. Здесь же мы остановимся на кратком описании использования Animate.
css.
Для ее применения к элементу (разумеется, после установки), должны быть добавлены два класса: animated и любой другой на выбор — именно он определяет какую анимацию мы используем. На JQuery это будет выглядеть примерно так:
Если вы хотите заточить анимацию “под себя”, можно настроить и другие параметры (время исполнения, задержка и т.д.).
Пример:
2. React анимация
Этот пункт будет интересен, в первую очередь, пользователям React. Откровенно говоря, сначала мы его недооценивали. В итоге же стандартная библиотека React существенно упростила нам жизнь.
Чем же она оказалась полезной? Ответим на этот вопрос небольшим обзором двух API для анимации.
ReactCSSTransitionGroup
Небольшой пример, как это выглядит:
Как видите, ReactCSSTransitionGroup оборачивает элемент, который мы собрались анимировать. В transitionName мы присваиваем имя нашей анимации.
Примечание! Распространенная ошибка: выносить ReactCSSTransitionGroup не в рендер самого компонента, а в отдельную функцию.
Так оно не работает!
Пример:
Мы можем отлавливать жизненное состояние нашей анимации даже в стилях. Имеется в виду отслеживание того, на каком этапе она находится.
Первый этап (1) — это наше начальное состояние. Далее с помощью уже готовых классов, добавленных к названию анимации, мы определяем, как именно будет меняться состояние элемента в следующий момент.
Далее (2) мы задаем начальное состояние для момента: когда элемент будет удален из DOM дерева и как именно будут меняться его стили перед удалением.
ReactTransitionGroup
Также встречаются задачи, когда жизненный цикл анимации надо контролировать непосредственно в самом js коде. На то существуют разные причины. Например, как и в случае ReactCSSTransitionGroup, присвоение стилей не всегда подходит. На помощь приходят жизненные циклы анимации.
Да, это очень похоже на методы жизненных циклов самого React. Здесь используется похожий подход. Перед вами методы из официальной документации:
componentWillAppear() — вызывается в том же время, что и componentDidMount(), при этом блокируя остальные анимации.
Выполняется только при первичном рендере TransitionGroup.
componentDidAppear() — вызывается сразу после отработки componentWillAppear(). Вызов происходит с помощью callback функции, переданной в вызванный componentWillAppear().
componentWillEnter() — срабатывает в том же время, что и componentDidMount(), похожа на componentWillAppear(), но в отличии от него не вызывается при первичном рендере элемента.
componentDidEnter() — вызывается сразу после отработки componentWillEnter().
componentWillLeave() — вызывается в тот момент, когда элемент был удален из ReactTransitionGroup. Но он все еще будет виден, так как ReactTransitionGroup придержит его до вызова callback.
componentDidLeave() — вызов происходит сразу после отработки callback функции componentWillLeave(). Срабатывает в то же время, что и componentWillUnmount().
Предлагаем ознакомиться с примером, реализованном на одном из наших проектов.
Задача: Анимировать пункты таблицы таким образом, чтобы при выпадении всего списка, каждый из них появлялся плавно один за другим. Приводим небольшой кусок кода:
Пока все просто: мы оборачиваем в TransitionGroup то, что анимируется. Чтобы это дало свой эффект и TransitionGroup мог отловить момент, когда наш child элемент появился или исчез из DOM дерева, нам следует поставить флаг (2) isOpenedMenuItemWorks.
Далее посмотрим на манипуляции, которые происходят в самом анимируемом компоненте FadeUpContainer.
Пример показывает, что все child компоненты, находящиеся внутри TransitionGroup, получают в свое пользование методы жизненного цикла для анимации. В данном случае методы componentWillEnter() и componentWillLeave().
В приведенном примере мы использовали библиотеку для анимации gsap. Очень рекомендуем ознакомиться с ее документацией. Эта библиотека позволяет решить массу проблем, связанных с анимацией. Главная особенность ее использования в том, что мы должны дать функции (здесь TweenMax) ссылку на анимируемый элемент.
Догадаться, какие параметры в функции TweenMax и за что отвечают совсем нетрудно. El ссылка на элемент, время исполнения, начальное состояние, конечное состояние + callback + время задержки.
3. Продвинутое использование библиотек для анимации при скроллинге
В этой части статьи мы расскажем о библиотеках, с которыми приходилось сталкиваться на практике. На сегодня — это WOW.js и AOS animate.
Между ними нет существенной концептуальной разницы. Обе анимируют при скроллинге. Обе используют для анимации готовые классы animate css. Но все же имеется и одно принципиальное отличие. В AOS можно определить свои классы для анимации, тогда как WOW использует только готовые animate.css классы. Именно поэтому мы решили сконцентрироваться на AOS (в использовании WOW на него очень похож).
Для того чтобы AOS заработал, его надо добавить глобально.
Пример:
В принципе все. Можно смело использовать.
А вот еще одна задача: анимация счетчика чисел в определенной части страницы при скроллинге.
В заключение отметим, современные технологии предлагают широкий спектр решений для реализации анимаций. Остается лишь подобрать оптимальный вариант под поставленную задачу. Если вам нужна высокая производительность и максимальная гибкость, при отсутствии сложных требований — используйте CSS анимации. В случае сложных требований лучшим выбором станут javascript-based анимации. С ними вы можете реализовать практически любую задачу. Причем, с легкостью и без заметных потерь в производительности.
Если вам понравилась статья, не забудьте поделиться ею в социальных сетях. Всем хорошего дня!
10 принципов создания плавной веб-анимации — Webest Digital-agency
Нет никакой особой «фишки» в создании масштабной анимации. Хотя нет, есть: нужно потратить немало времени на её оптимизацию и тестирование. Так после нескольких лет экспериментов, постоянно упираясь в пределы производительности браузеров, мы вывели серию принципов дизайна и кодинга, которые позволят любому желающему украсить свой проект эффектной и производительной анимацией.
Их использование позволит вам получить плавную работу страниц в десктопных и мобильных браузерах. И самое главное – всё это делается и обслуживается весьма просто.
Технология и реализация будут немного отличаться для каждого конкретного случая, но мы уверены, что наши общие принципы окажутся полезными практически в любой ситуации.
Что такое анимация?Анимации существовали ещё до появления Интернета. Для создания лучших из них можно потратить всю жизнь на обучение. Тем не менее, в этом деле тоже существуют закономерности. Мы обсудим некоторые типичные и не очень проблемы, с которыми сталкиваются дизайнеры при создании анимации для размещения в вэбе.
Для получения плавной анимации с 60 fps каждый кадр должен обрабатываться менее чем за 16 мс! Это малый промежуток времени, поэтому необходимо найти очень эффективные способы рендеринга каждого кадра для высокой производительности анимации.
Существует множество способов реализации веб-анимации. Например, кинолента существовала ещё до появления Интернета. Суть её в том, что вручную прорисованные кадры с минимальным различием демонстрировались несколько раз в секунду, создавая таким образом иллюзию движения у зрителя.
Twitter недавно использовали этот простой подход для их новой анимации сердца, прокручивая в заданной последовательности 26 кадров.
Полученная таким образом анимация слишком сложна в реализации и, на самом деле, недостаточно плавная.
Во многих случаях выгоднее использовать свойство CSS «transition» для автоматической анимации элемента при его изменении. Эта техника известна также как «tweening» и подразумевает создание анимации с автоматическим построением промежуточных изображений. Допустим, мы имеем 2 изображения одного объекта в различных положениях. Эффекты перехода CSS помогут создать анимацию изменения его состояния.
Также анимация, построенная в CSS на ключевых кадрах, может служить идеальным фоном для выбранных областей страницы. К примеру, кольца из логотипа «Гироскопа» постоянно вращаются. Такой подход хорошо использовать для анимации движения различных механизмов.
Итак, с вводной закругляемся и переходим к основной части поста. Дадим несколько советов, которые помогут значительно повысить производительность и качество вашей анимации. Надеемся, они вам помогут.
#1 Не изменяйте никакие свойства кроме непрозрачности (opacity) и преобразования (transform)Даже если вам кажется, что так будет лучше, всё равно не стоит этого делать!
Следование этому базовому принципу повысит эффективность работы на 80%, даже в мобильном сегменте.
На самом деле, к использованию этого принципа довольно просто привыкнуть. Особую выгоду это принесёт тем, кто ранее делал анимации при помощи традиционных свойств CSS.
Например, если вам нужно сделать объект меньше, вы можете использовать свойство трансформации scale вместо изменения ширины/высоты. Если вам нужно переместить элемент, то не стоит возиться с изменением значений отступов, ведь такая анимация потребует перестройки макета страницы при каждом кадре. Лучше используйте простые свойства трансформаций для этого:
Для человека, меняющего ширину, отступы и другие подобные параметры использование свойств трансформации может и не выглядеть выдающейся идеей.
Визуально результат ведь схож. Но с точки зрения затрат вычислительной мощи компьютера, который будет всё это обсчитывать, использование transform выглядит в разы лучше.
Можно сойти с ума, ожидая загрузки такой страницы: все углы скруглены, используются изображения, на всё положены тени и для полного счастья добавлено динамическое размытие элементов. Если такое происходит 1 раз, то несколько лишних миллисекунд ожидания роли не сыграют. Но как только весь контент будет выведен на экран, вы больше не захотите ждать пересчёта каких-либо значений для изменения страницы.
#2
Скрывайте контент на виду.Используйте «pointer-events» в CSS: значение «none» наряду с нулевой непрозрачностью для сокрытия элементов
Данный метод плохо работает в старых браузерах, но если вы проектируете для webkit или других современных браузерных движков, то он сделает вашу жизнь намного проще.
В далёкие времена, когда анимации обрабатывались при помощи jQuery animate(), основная сложность при работе с эффектом fade заключалась в необходимости переключения значения свойства display: активировать none для прекращения эффекта в нужный момент. Слишком рано и анимация не будет завершена, слишком поздно и вы получаете невидимый элемент с нулевым значением opacity, перекрывающий страницу. Требовался обратный отклик для очистки экрана после завершения анимации.
Свойство CSS «pointer-events» (существует давно, но почему-то используют его нечасто) служит для того, чтобы сделать вещи нечувствительными к кликам мышью и другим взаимодействиям. Так, будто их вообще нет на странице. Это свойство может быть легко включено/выключено посредством CSS. При работе оно не прерывает анимацию и не влияет на рендеринг/видимость элементов.
Комбинируя эту вещь с нулевым значением opacity, мы получаем тот же эффект, что даёт «display: none», но без влияния на производительность при запуске новых циклов рендеринга анимации.
Этот приём особенно хорошо работает с элементами, имеющими абсолютное позиционирование, поскольку в таком случае вы можете быть уверены в том, что они не оказывают никакого влияния на все остальные участки макета и элементы страницы.
Также это даёт вам намного большую свободу действий, поскольку выбор времени начала/прекращения анимации в таком случае может быть и не очень точным. Даже если вы немного ошибётесь с таймингами, ничего страшного не произойдёт. Пользователь просто не сможет ничего нажать до того, как анимация завершится. Всё будет идти так, как вы задумали.
#3
Не нужно анимировать всё подряд одновременно.Либо же используйте принцип хореографии.
Одна анимация может быть плавной сама по себе, но, если одновременно отрабатывается несколько эффектов, это может испортить всю картину и снизить производительность. Создать плавно работающую демку очень просто, зато обеспечить приемлемый уровень производительности в составе целого сайта намного сложнее. Поэтому очень важно планировать появление анимации должным образом.
Вы захотите выстроить тайминги таким образом, чтобы все анимации запускались в разное время. Обычно 2-3 анимации могут работать без задержек одновременно, особенно если они стартуют с небольшим разбросом по времени. Более 3 одновременных (на глаз, но не по существу — минимальный разброс по времени должен быть) запусков почти наверняка вызовут лаги на экране.
Если на странице больше одной анимации, вам важно понять концепцию хореографии. Казалось бы, причём здесь танцевальный термин? Но понимание его сути в данном контексте очень важно для успешной анимации интерфейсов: вещи должны приходить на экран из правильного направления и в нужные моменты.
Материал-дизайн от Google имеет некоторые интересные наработки по этому вопросу. Это, конечно, не единственно правильный путь, но он даёт пищу для размышлений и тестирования.
#4
Небольшое увеличение задержки перехода позволяет легко следовать принципу хореографииХореография анимации очень важна, и её качественная постановка потребует большого количества экспериментов. Тем не менее, код для реализации задумки вряд ли получится очень сложным.
Я обычно заменяю один класс на родительском элементе (чаще всего на body) для того, чтобы вызвать кучу переходов, каждый из которых имеет свой параметр задержки (transition-delay). Делается это для того, чтобы каждый элемент появлялся в нужное мне время. С точки зрения кодинга вам стоит беспокоиться о значении лишь одной переменной вместо поддержания десятков таймингов в JavaScript.
Раскачивая одновременно серию элементов, можно довольно просто скомпоновать их хореографию. Это мощный подход, потому что всё это одновременно и выглядит хорошо, и работает быстро, лишь помните, что только 2-3 анимации можно запускать одновременно, и всё будет хорошо. Нужно распространить их на странице так, чтобы каждая отрабатывалась плавно и своевременно. Сет ваших анимаций должен восприниматься зрителем как непрерывный поток, а не цепочка разрозненных элементов. Единая плавная сцена.
Пример кода
Есть несколько простых методов, которые позволят раскачивать ваши элементы. Они являются очень удобными, особенно если вы используете длинную цепочку анимаций. Если цепочка включает менее 10 элементов, то я обычно указываю значения задержек в CSS. Это самый простой способ реализации.
Для более длинных последовательностей или очень динамично изменяющихся элементов тайминги могут устанавливаться динамически для всех элементов путём изменения значений переменных.
Как правило, используются 2 переменные: ваша базовая задержка и задержка по времени между каждым элементом. Такой баланс отыскать довольно сложно, но если вы попадёте на правильный набор чисел, то всё будет отлично.
#5
Используйте общий множитель для разработки в slow motionИ ускорьте всё это позже.
В дизайне анимации тайминг является нашим всем. 20% работы кроется в создании самих анимаций, а остальные 80% — в нахождении правильных параметров и таймингов для получения чётко синхронизированной и плавной сцены.
Особенно это актуально при работе над хореографией обширного множества элементов и попытках выжать максимум производительности. После замедления анимаций с такими сценами станет работать намного проще.
Если вы используете Javascript или какой-нибудь CSS-препроцессор вроде SASS, код должен быть достаточно простым для построения правильной структуры переменных.
Вы должны убедиться в удобстве кодовой конструкции, чтобы без проблем тестировать различные скорости и тайминги. Например, если анимация заикается даже на 1/10 скорости, вы, скорее всего, делаете что-то в корне неправильно. Если она идёт гладко при растяжении в 50 раз, то вопрос сводится к нахождению максимальной скорости, при которой она сможет плавно работать. Довольно трудно заметить проблемы на полной скорости, но если вы снизите её, то все они станут весьма очевидными.
Для настройки очень сложных анимаций либо же при поиске узких мест в производительности отслеживание процесса в замедленном темпе будет очень полезным.
Идея заключается в том, чтобы упаковать много красивых деталей в сцену при замедленной демонстрации, после чего ускорить всё это дело так, чтобы анимации выглядели идеально. Это очень тонкая работа, зато пользователи оценят детализацию и плавность происходящего на экране.
Эта фишка является действующей частью OS X: когда вы сворачиваете окно с программой, видите анимацию в замедленном темпе.
#6
Возьмите видео с записью вашего интерфейса и прокрутите, от третьего лица вы сможете увидеть большеИногда взгляд со стороны помогает видеть вещи более ясно, и видео является отличным способом добиться этого.
Некоторые люди создают видео в After Effects, после чего пробуют реализовать полученное на сайте. Я часто делаю с точностью до наоборот, пытаясь сделать хорошее видео на основе пользовательского интерфейса сайта.
Однажды я был настолько впечатлён полученным от работы результатом, что решил поделиться с друзьями видео с его записью. Тем не менее, при повторном просмотре мною была замечена куча вещей, далёких от восхищения. Были лаги, да и тайминги выставлены немного неверно. Это меня смутило, и вместо того, чтобы разослать видео, я принялся доводить результат до ума. Работы там оставалось немало.
В режиме реального времени довольно просто можно упустить какие-то моменты.
Зато просмотр анимации в записи на медленной скорости снова и снова поможет выявить даже самые мелкие проблемы. При таком подходе всё становится очевидным.
Просмотр замедленных видео с моих страниц и корректировка проблемных участков стали важной частью моей работы. Можно, конечно, всё списывать на медленные браузеры, но зачастую, после тестирования и проведения оптимизации анимации начинают работать как по маслу. То есть всё решаемо при грамотном подходе.
Если после просмотров и правок меня ничего не смущает, и я могу со спокойной совестью поделиться таким видео с коллегами и друзьями, значит, проект готов к релизу.
#7
Активность Сети может привести к лагам.Вам нужно предварительно загрузить или блокировать большие HTTP-запросы
Изображения выступают в этом плане решающим фактором, особенно если они большие по весу (к примеру, тяжёлый фон), или тонна маленьких (загрузка 50-100 аватаров, допустим), или просто большое количество контента (длинная страница с кучей картинок).
Во время первой загрузки страницы тонны вещей инициализируются и загружаются. Объявления, модули и другие сценарии 3 очереди загрузки ещё сильнее усугубляют ситуацию. Иногда задержка воспроизведения анимаций всего лишь на несколько сотен миллисекунд после загрузки остальных элементов страницы способна совершить чудо. Вы получите значительный прирост производительности.
Не стоит задействовать мега-оптимизацию без явной необходимости, хотя тяжёлая страница может потребовать установки очень точных задержек и таймингов анимации для плавной работы. В общем, нужно для начала загрузить настолько малое количество данных, насколько это возможно, потом подключить анимацию, а уже после неё продолжить загрузку остальной части тяжёлого контента страницы.
На страницах с большим количеством данных работа по оптимизации может занять немало времени. Анимация, работающая хорошо со статическим контентом, может начать сильно тормозить и разваливаться при одновременной загрузке с реальными данными.
Если что-то выглядит вполне плавно работающим, но в некоторые моменты начинает лагать по неясной причине, следует проверить сетевую активность. Возможно, в эти моменты ваш канал занят другими загрузками. Убедитесь, что ваша сеть не выполняет несколько одновременных больших загрузок.
#8
Не нужно менять стандартную прокрутку.Идея замены скролла может показаться классной, но это не так на самом деле.
Скроллинг на основе анимации популярен уже несколько лет, особенно если он сделан с применением параллакса и других спецэффектов. О его полезности можно спорить долго, а вот способы технической реализации такой задумки есть удачные и не очень.
Умеренно эффективным способом создания вещей из этой категории является определение оптимального шага прокрутки и выделение его в отдельное событие (event). Если же вы не знаете, что делаете, то лучше вообще не использовать такой скроллинг.
Здесь легко ошибиться, да и поддерживать нормальный уровень производительности на страницах со сложным скроллингом – довольно хлопотное занятие.
Ещё худшей затеей выглядит замена стандартного скролла на так называемый scrolljacking (контент изменяется в такт прокрутке, пример – сайт Apple). Не делайте этого. Реализовать удачно такой эффект сложно, да и не всем пользователям он понравится.
Если у вас есть определённый опыт и желание создать свой скроллбар, сделайте его облегчённый прототип и протестируйте на работоспособность, прежде чем тратить время на полную разработку.
#9
Почаще тестируйте свои проекты на мобильных устройствах.Большинство веб-сайтов созданы на ПК. Чаще всего они тестируются на той же машине, на которой их разработали. Таким образом, мобильная версия сайта и производительность анимаций отходят на задний план. Некоторые технологии создания анимации (к примеру, canvas) не будут нормально работать на мобильных платформах.
Тем не менее, если анимация будет сделана и оптимизирована должным образом, то полученный от неё мобильный опыт использования может превосходить по качеству десктопный. Мобильная оптимизация раньше была очень сложной темой, но новые iPhone работают быстрее большинства ноутбуков. Если вы станете следовать приведённым выше советам, то сможете добиться внушительной производительности ваших анимаций и на мобильных устройствах.
Мобильная версия сайта – большая и очень важная его часть. Это может показаться странным, но я рекомендую в течение недели просматривать ваш сайт исключительно с телефона или планшета. В идеале вы не должны чувствовать, что получили наказание из-за невозможности добраться до десктопа. Если всё работает быстро, плавно и без нарушений задуманной структуры, то вы достигли цели. Если что-то идёт не так, нужно продолжать работу.
Продолжайте вносить конструктивные усовершенствования и улучшать производительность, пока разница в комфортности использования мобильной и десктопной версии сайта не исчезнет совсем.
Если вы заставите себя использовать мобильный сайт в течение недели, то, вероятно, в конечном итоге, оптимизируете его даже лучше, чем большую версию. Борясь с раздражением, используя его на регулярной основе, вы в полной мере ощутите проблемы, с которыми предстоит столкнуться вашим пользователям, и сможете устранить их до выхода проекта в широкие массы. Это избавит от множества проблем в будущем.
#10
Тестируйте проекты на разнообразных устройствахСуществует множество факторов, способных кардинально повлиять на производительность сайта на ПК и мобильных устройствах: разрешение экрана, количество пикселей в окне, старость железа и т. д.
Несмотря на то, что Chrome и Safari созданы на базе Webkit и имеют практически одинаковый синтаксис, у каждого из них свои собственные причуды. Любое обновление Хрома одновременно устраняет старые ошибки и привносит новые, так что вы должны постоянно держать руку на пульсе, как говорится.
Понятно, не все хотят идти по пути наименьшего сопротивления, делая сайты по нижнему общему знаменателю суммы багов, дабы не попасть в очередной просак после обновлений наиболее популярных браузеров. Поиск грамотных путей добавления усовершенствований и удаления некоторых из них для поддержания плавной работы сайта может быть очень полезным.
Я регулярно переключаюсь в работе между моим маленьким MacBook Air и большим iMac. Каждый такой цикл выявляет небольшие проблемы и указывает на необходимые усовершенствования. Это касается не только производительности работы анимации, но и дизайна сайта в целом, плотности информации, читаемости, структуры и т. д.
Модели мобильной и обычной версии сайта чаще всего отличаются дизайном структуры по ширине, высоте, плотности пикселей и другим свойствам. Знание особенностей операционных систем и аппаратных характеристик мобильных устройств может помочь в оптимизации, поскольку они сильно отличаются от таковых на ПК.
Перевод статьи https://blog.gyrosco.pe/smooth-css-animations-7d8ffc2c1d29
вверхВнешний вид CSS Свойство
❮ Пред. Следующий ❯
Свойство возникновения в CSS используется для управления внешним видом элементов управления формы, таких как кнопки, флажки, переключатели и другие. Он позволяет изменять стиль элементов управления родного пользовательского интерфейса, обеспечивая единообразный внешний вид в разных браузерах и на разных устройствах.
Свойство -moz-appearance используется в Gecko (Firefox) для отображения элемента с использованием собственного стиля платформы на основе темы операционной системы.
Свойство -webkit-appearance — это проприетарное расширение CSS, поддерживаемое механизмом браузера WebKit.
Расширения WebKit содержат префикс -webkit-, указывающий на то, что они принадлежат платформе с открытым исходным кодом WebKit.
Свойство -webkit-appearance не является частью официальной спецификации CSS W3C и предназначено для работы в браузерах, использующих механизм браузера WebKit, таких как Apple Safari и Google Chrome.
Если это свойство используется на веб-сайтах, его следует тестировать с осторожностью. Реализация свойства появления может сильно отличаться, особенно в старых браузерах. Но в более новых браузерах есть лишь небольшие отличия.
Обратите внимание, что свойство «внешний вид» поддерживается не всеми браузерами, и его поведение может различаться в зависимости от браузера и операционной системы. Кроме того, изменение внешнего вида элементов управления формы может повлиять на удобство использования и доступность вашего веб-сайта, поэтому важно использовать его разумно.
внешний вид: нет | авто | начальная | наследовать | значок | окно | кнопка | меню | поле | рабочий стол | рабочее пространство | документ | подсказка | диалог | кнопка | гиперссылка | переключатель | флажок | пункт меню | вкладка | меню | план-дерево | диапазон | подпись | пароль;
Пример свойства внешнего вида:
<голова>
Название документа
<стиль>
ввод[тип="флажок"] {
-webkit-внешний вид: нет; /* удалить внешний вид по умолчанию в браузерах на базе Webkit */
-моз-внешний вид: нет; /* удалить внешний вид по умолчанию в браузерах на основе Mozilla */
внешний вид: нет; /* удалить внешний вид по умолчанию во всех других браузерах */
ширина: 20 пикселей;
высота: 20 пикселей;
граница: 2px сплошная #333;
радиус границы: 3px;
контур: нет;
курсор: указатель;
поле справа: 10px;
}
input[type="checkbox"]:checked:before {
содержимое: "\2714"; /* Символ галочки Unicode */
дисплей: блок;
выравнивание текста: по центру;
размер шрифта: 14px;
высота строки: 16px;
цвет: #fff;
цвет фона: #333;
радиус границы: 2px;
ширина: 20 пикселей;
высота: 20 пикселей;
}
<тело>
Попробуй сам »
В этом примере мы сначала удаляем внешний вид флажка по умолчанию, задавая для свойства внешний вид значение none .
Затем мы определяем внешний вид флажка с помощью правил CSS.
Флажок имеет ширину и высоту 20 пикселей, сплошную границу 2 пикселя и радиус границы 3 пикселя, чтобы придать ему закругленные углы. Мы также устанавливаем для свойства контур значение none , чтобы удалить контур, который появляется вокруг флажка, когда он находится в фокусе.
Чтобы отобразить галочку, когда флажок установлен, мы используем псевдоэлемент :before для создания блока содержимого с символом галочки Unicode ( \2714 ) в качестве содержимого. Мы задаем этому блоку ширину и высоту 20 пикселей, цвет фона #333 и радиус границы 2 пикселя, чтобы он выглядел как закрашенный круг. Мы также установили белый цвет текста, чтобы галочка выделялась на темном фоне.
Практикуйте свои знания
Ниже приведены значения свойства внешнего вида CSS, кроме
. икона окно навигация меню отображать пароль рабочий стол
Успех!
Неверно! Ты не правильно понял!
Внешний вид— CSS: Каскадные таблицы стилей
внешний вид Свойство CSS используется для управления собственным внешним видом элементов управления пользовательского интерфейса, основанных на теме операционной системы.
До стандартизации это свойство позволяло отображать простые элементы в виде виджетов, таких как кнопки или флажки. Это было сочтено ошибкой, и теперь авторам рекомендуется использовать только стандартные ключевые слова.
Примечание: Если вы хотите использовать это свойство на веб-сайтах, вам следует тщательно протестировать его. Хотя он поддерживается в большинстве современных браузеров, его реализация различается. В старых браузерах даже ключевое слово none не оказывает одинакового эффекта на все элементы формы в разных браузерах, а некоторые вообще не поддерживают его. Различия меньше в новейших браузерах.
/* Базовый модуль пользовательского интерфейса CSS, уровень 4, значения */ внешний вид: нет; внешний вид: авто; внешний вид: меню-кнопка; внешний вид: текстовое поле; /* Значения «Compat-auto», которые имеют тот же эффект, что и «auto» */ внешний вид: кнопка; внешний вид: поле поиска; внешний вид: текстовая область; внешний вид: кнопочный; внешний вид: слайдер-горизонтальный; внешний вид: флажок; внешний вид: радио; внешний вид: квадратная кнопка; внешний вид: список меню; внешний вид: список; внешний вид: метр; внешний вид: прогресс-бар; /* Частичный список доступных значений в Gecko */ -moz-внешний вид: полоса прокрутки кнопкой вверх; -моз-внешний вид: пуговица-скос; /* Частичный список доступных значений в WebKit/Blink (а также в Gecko и Edge) */ -webkit-внешний вид: медиа-кнопка отключения звука; -webkit-внешний вид: каретка; /* Глобальные значения */ внешний вид: наследуй; внешний вид: начальный; внешний вид: реверс; внешний вид: реверс-слой; внешний вид: не установлен;
Значения
Стандартные ключевые слова
| Значение | Браузер | Описание |
|---|---|---|
нет | Firefox Chrome Safari Edge | Скрывает некоторые функции виджетов, такие как стрелка, отображаемая в элементе выбора, указывающая, что список можно расширить. |
авто | Firefox Chrome Edge | Пользовательский агент выбирает соответствующий специальный стиль на основе
элемент. Действует как нет для элементов без специального стиля. |
кнопка списка меню | Firefox Chrome Safari Edge | |
текстовое поле | Firefox Chrome Safari Edge | |
Следующие значения считаются эквивалентными auto : | ||
кнопка | Firefox Chrome Safari Edge | Элемент раньше рисовался как кнопка. |
флажок | Firefox Chrome Safari Edge | Раньше элемент рисовался как флажок, включая только фактический часть «флажок». |
список | Firefox Chrome Safari Edge | |
список меню | Firefox Chrome Safari Edge | |
метр | Chrome Safari Firefox | |
индикатор выполнения | Chrome Safari Firefox | |
кнопка | Край Chrome Safari | |
радио | Firefox Chrome Safari Edge | Раньше элемент рисовался как радиокнопка, включая только фактический
часть «радиокнопка». |
поле поиска | Firefox Chrome Safari Edge | |
горизонтальный слайдер | Край Chrome Safari | |
квадратная кнопка | Край Chrome Safari | |
текстовая область | Firefox Chrome Safari Edge | |
Нестандартные ключевые слова
Следующие значения могут работать на исторических версиях браузера с использованием -Moz -Appearance или -Webkit -Appearance Префикс, но не на стандартной 10006 Profix.
| Значение | Браузер | Описание |
|---|---|---|
насадка | Сафари | |
крепление без полей | Сафари | |
кнопка-скос | Firefox Chrome Safari Edge | |
Индикатор Caps Lock | Край Сафари | |
каре | Firefox Chrome Safari Edge | |
контейнер-флажок | Фаерфокс | Элемент отображается как контейнер для флажка, который может включать фоновый эффект предварительного освещения на некоторых платформах. Обычно он содержит метку и флажок. |
флажок-метка | Фаерфокс | |
элемент меню проверки | Фаерфокс | |
Колодка для окрашивания | Сафари | тип ввода=цвет |
индикатор уровня постоянной емкости | Сафари | |
кнопка по умолчанию | Край Сафари | |
Индикатор уровня дискретной емкости | Сафари | |
внутренняя кнопка вращения | Firefox Chrome Safari | |
кнопка управления изображением | Сафари | |
кнопка-список | Сафари | список данных |
элемент списка | Firefox Chrome Safari Edge | |
медиа-вход-кнопка полноэкранного режима | Хром Сафари | |
медиа-выход-кнопка полноэкранного режима | Хром Сафари | |
медиа-полноэкранный-ползунок громкости | Сафари | |
медиа-полноэкранный-ползунок громкости | Сафари | |
кнопка отключения звука | Край Chrome Safari | |
кнопка воспроизведения мультимедиа | Край Chrome Safari | |
медиа-оверлей-кнопка воспроизведения | Хром Сафари | |
кнопка возврата в режим реального времени | Сафари | |
кнопка перемотки мультимедиа | Сафари | |
кнопка возврата назад | Край Сафари | |
кнопка медиапоиска вперед | Край Сафари | |
медиа-переключатель-кнопка субтитров | Хром Сафари | |
медиа-слайдер | Край Chrome Safari | |
медиа-ползунок | Край Chrome Safari | |
Контейнер-слайдер для медиа-объемов | Хром Сафари | |
медиа-громкость-ползунок-кнопка отключения звука | Сафари | |
ползунок громкости мультимедиа | Хром Сафари | |
media-volume-sliderthumb | Хром Сафари | |
медиа-управление-фон | Хром Сафари | |
медиа-управление-темная полоса-фон | Сафари | |
медиа-управление-полноэкранный-фон | Хром Сафари | |
медиа-управление-свет-бар-фон | Сафари | |
медиа-текущее-время-дисплей | Хром Сафари | |
отображение оставшегося времени мультимедиа | Хром Сафари | |
текст меню | Firefox Chrome Safari Edge | |
меню-текстовое поле | Firefox Chrome Safari Edge | Элемент оформлен как текстовое поле для списка меню. (Не реализовано для платформы Windows) |
Метрбар | Фаерфокс | Вместо этого используйте метров . |
числовой ввод | Фаерфокс | |
значение индикатора выполнения | Хром Сафари | |
полоса прогресса | Фаерфокс | Элемент оформлен в виде индикатора выполнения. Используйте индикатор выполнения вместо |
вертикальная полоса прогресса | Фаерфокс | |
диапазон | Фаерфокс | |
большой палец | Фаерфокс | |
индикатор уровня рейтинга | Сафари | |
индикатор уровня релевантности | Сафари | |
шкала горизонтальная | Фаерфокс | |
шкалабольшой палец | Фаерфокс | |
шкала ползунковая горизонтальная | Фаерфокс | |
шкала от пальца | Фаерфокс | |
Scalethumbtick | Фаерфокс | |
шкала вертикальная | Фаерфокс | |
шкала вертикальная | Фаерфокс | |
полоса прокрутки, горизонтальная | Фаерфокс | |
полоса прокрутки, вертикальная | Фаерфокс | |
полоса прокрутки-горизонтальная | Фаерфокс | |
полоса прокрутки по вертикали | Фаерфокс | |
украшение поля поиска | Край Сафари | |
поиск-результаты-украшение | Край Chrome Safari | (работает на Chrome 51 в Windows 7) |
кнопка результатов поля поиска | Край Сафари | |
поле поиска-кнопка отмены | Край Chrome Safari | |
снэпшот-плагин-оверлей | Сафари | |
лист | Нет | |
ползунок вертикальный | Край Chrome Safari | |
ползунок, горизонтальный | Край Chrome Safari | |
ползунок вертикальный | Край Chrome Safari | |
многострочное текстовое поле | Фаерфокс | Вместо этого используйте текстовое поле . |
-кнопка Apple Pay | Сафари | Только iOS и macOS . Доступно в Интернете, начиная с iOS 10.1 и macOS 10.12.1 |
| Исходное значение | нет |
|---|---|
| Применимо к | всем элементам |
| Унаследовано | нет |
| Вычисленное значение | как указано |
| Тип анимации | дискретный |
внешний вид =
нет |
авто |
|
">
=
поле поиска |
текстовое поле |
кнопка |
горизонтальный ползунок |
флажок |
радио |
квадратная кнопка |
список меню |
список |
метр |
прогресс-бар |
кнопка">
=
textfield |
menulist-button
.
