Добавляем анимацию блоков #4
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,16 @@ | ||
| $counter-animation-duration: 0.3s; | ||
| $counter-number-animation-duration: 0.4s; | ||
|
Comment on lines
+1
to
+2
There was a problem hiding this comment. ☝️ - И если продолжать мысли про упрощение восприятия, то можно сказать, что эти вынесенные в сторону константы тоже не имеют особого смысла. Эти значения так же используются только в одном месте, и их смысл однозначно трактуется из того факта, что в том CSS свойстве ничего другого, кроме длительности, быть не может. Если это были бы вынесенные в единую на весь проект систему значения со смыслами вроде "короткая", "средняя", "длинная" и они бы переиспользовались во всех компонентах, то это была бы система, которая приводит весь проект к единому знаменателю. И мы бы находили в этом определенную прелесть при построении процессов разработки. Но текущие константы такого эффекта не дают. Они просто есть чтобы были. Не совсем понятно, какую задачу они решают. |
||
| $text-animation-duration: 0.5s; | ||
| $rules-btn-delay: 1s; | ||
|
|
||
| @function counter-animation-delay($i) { | ||
| @return ($i - 1) * $counter-animation-duration; | ||
| } | ||
|
Comment on lines
+6
to
+8
There was a problem hiding this comment. ☝️ - Я вижу определенную логику здесь, но на самом деле напрашивается мысль, что можно было бы все эти расчеты построить на CSS custom properties. Это не даст какой-то сильной нагрузки на железо, а вот нагрузку на мозг снимет. Результаты этих расчетов используются в одном единственном месте, вынесенный в сторону миксин усложняет восприятие. И плюс не нужно будет повторять одни и те же строки для before и p ниже. Кода будет заметно меньше и воспринимать его будет проще. Подумайте над этим. CSS не стоит на месте, и в подобных задачах часто можно сильно сократить количество кода без каких-то сильных побочных эффектов. |
||
|
|
||
| @function text-animation-delay($i) { | ||
| @return counter-animation-delay($i + 1) - 0.1s; | ||
| } | ||
|
|
||
| .rules { | ||
| position: relative; | ||
| flex-grow: 1; | ||
|
|
@@ -155,10 +168,16 @@ | |
| font-family: $font-alt; | ||
| font-weight: 400; | ||
| font-size: 2.4rem; | ||
| color: transparent; | ||
| background-color: $c-purple; | ||
| border-radius: 50%; | ||
| line-height: 5rem; | ||
| text-align: center; | ||
| transform: scale(0); | ||
| animation-name: show-rule-counter, show-rule-counter-number; | ||
| animation-duration: $counter-animation-duration, $counter-number-animation-duration; | ||
| animation-fill-mode: forwards, forwards; | ||
| animation-timing-function: cubic-bezier(0.17, 0.67, 0.49, 1.31), ease; | ||
|
|
||
| @media (max-width: $tablet) and (orientation: portrait) { | ||
| top: 1rem; | ||
|
|
@@ -179,11 +198,50 @@ | |
|
|
||
| p { | ||
| margin: 0; | ||
| opacity: 0; | ||
| animation-name: show-rule-text; | ||
| animation-duration: $btn-animation-duration; | ||
| animation-fill-mode: forwards; | ||
|
|
||
| @media (max-width: $tablet) and (orientation: portrait) { | ||
| min-height: calc(1.4rem * 2.2); | ||
| } | ||
| } | ||
|
|
||
| &:nth-of-type(1) { | ||
| p { | ||
| animation-delay: text-animation-delay(1); | ||
| } | ||
| } | ||
|
|
||
| &:nth-of-type(2) { | ||
| &::before { | ||
| animation-delay: counter-animation-delay(2); | ||
| } | ||
| p { | ||
| animation-delay: text-animation-delay(2); | ||
| } | ||
| } | ||
|
|
||
|
|
||
| &:nth-of-type(3) { | ||
| &::before { | ||
| animation-delay: counter-animation-delay(3); | ||
| } | ||
| p { | ||
| animation-delay: text-animation-delay(3); | ||
| } | ||
| } | ||
|
|
||
|
|
||
| &:nth-of-type(4) { | ||
| &::before { | ||
| animation-delay: counter-animation-delay(4); | ||
| } | ||
| p { | ||
| animation-delay: text-animation-delay(4); | ||
| } | ||
| } | ||
| } | ||
|
|
||
| .rules__link { | ||
|
|
@@ -210,4 +268,40 @@ | |
| bottom: 2rem; | ||
| right: 1.5rem; | ||
| } | ||
|
|
||
| &.animate__btn { | ||
| animation-delay: sum($rules-btn-delay, $btn-animation-duration); | ||
|
|
||
| &:before { | ||
| @include right; | ||
| animation-delay: $rules-btn-delay; | ||
| } | ||
| } | ||
| } | ||
|
|
||
|
|
||
| @keyframes show-rule-counter { | ||
| to { | ||
| transform: scale(1); | ||
| } | ||
| } | ||
|
|
||
| @keyframes show-rule-counter-number { | ||
| 40% { | ||
| color: transparent; | ||
| } | ||
| to { | ||
| color: $c-light; | ||
| } | ||
| } | ||
|
|
||
| @keyframes show-rule-text { | ||
| from { | ||
| opacity: 0; | ||
| transform: translateX(1rem); | ||
| } | ||
| to { | ||
| opacity: 1; | ||
| transform: translateX(0); | ||
|
Comment on lines
+304
to
+305
There was a problem hiding this comment. ☝️ - Для таких универсальных анимаций есть общепринятые названия вроде fadeIn, fadeOut, fadeInLeft, fadeInRight и.т.д. Есть популярная библиотека animate.css в которой они все собраны. Если вы будете придерживаться этих названий - ваш код будет проще понимать вашим коллегам, не нужно будет думать, что делает та или иная анимация. По крайней мере познакомиться с этой системой названий точно стоит. |
||
| } | ||
| } | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| @function sum($numbers...) { | ||
| $sum: 0; | ||
| @each $number in $numbers { | ||
| $sum: $sum + $number; | ||
| } | ||
| @return $sum; | ||
| } |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
☝️ - С точки зрения производительности лучше отдавать предпочтение свойству
transform. Более подробно тема производительности в CSS разбирается во втором модуле учебника, но если в двух словах, то лучше все, что есть, анимировать меняя свойстваtransformиopacity, т.к. они менее склонны вызывать перерисовку всей страницы. Не всегда решение очевидно с первого взгляда, но это вопросы больше из области верстки, а не анимаций. Вы вроде как уже начинали верстать на трансформациях, стоит эту тему и дальше развивать.💡 - Может быть полезно завести себе в привычку сразу верстать разные состояния компонентов интерфейса так, чтобы они отличались только по этим свойствам, или по крайней мере стремиться к этому. Если верстку делает кто-то другой, то можно требование использовать эти свойства заранее включить в ТЗ. Это простой способ предотвратить рост технического долга по части производительности в нашем текущем контексте. Главный подводный камень тут в том, что проблемы с производительностью, заложенные в таких анимациях, имеют накопительный эффект. Чем больше одновременных анимаций и чем больше страница - тем сильнее они будут проявляться. И не всегда можно заранее предсказать, где те или иные компоненты будут использоваться. В результате может получиться пожар из разряда тех, что проще предотвратить, чем потушить. Думаю вы видели такие интернет-магазины, которые чуть ли не вешаются при открывании какой-нибудь менюшки - это именно оно. Схожий эффект может дать постоянное залезание в DOM из скриптов и совершение операций, которые вызывают перерисовку страницы в той или иной степени. Там тоже легко закрыть на это глаза на простой странице, но по мере роста проекта проблемы с производительностью будут усугубляться аналогичным образом. В некоторых особо сложных случаях делу может помочь свойство
contain, но оно не решает проблему с перерисовкой страницы полностью, оно лишь помогает ее локализовать. Иногда этого достаточно, чтобы страница перестала тормозить, иногда - нет.