Добавляем анимацию появления шапки #2
Conversation
|
♻️ Я собрал ваш пулреквест. Посмотреть можно здесь. |
There was a problem hiding this comment.
✏️ Первичная проверка.
Обозначения:
🔴 - Нужно обязательно исправить.
☝️ - Нужно принять к сведению, обращать внимание в перспективе.
💡 - Дополнительные мысли для саморазвития (за рамками учебных задач).
🔷 - Важное сообщение.
Чеклист:
- Логотип плавно появляется слева.
- Футер плавно появляется снизу.
- Шапка появляется из прозрачности без смещения.
- Рисуется полоса под первым (активным) пунктом меню в шапке.
- Кружочек иконки социальных сетей увеличивается, как бы пружинит, и потом уменьшается. Размер самой иконки с точками не меняется. Сохранена работоспособность анимаций кнопки при наведении мыши (из первого задания).
Комментарии:
👍 - Все работает.
💡 - Если у нас в проекте есть дизайн-система, то вполне вероятно, что она включает в себя набор длительностей и временных функций для анимаций. К сожалению в учебном проекте такой системы нет, но тем не менее у вас в коде будут продолжать накапливаться повторяющиеся значения длительностей, задержек для анимаций и временных функций. И на самом деле в любом проекте они будут накапливаться. Может иметь смысл подумать над тем, как будет удобно организовать эти повторяющиеся значения. Со стороны дизайнера это может выглядеть как список значений с инструкциями, какие из них для каких ситуаций в интерфейсе должны применяться, а с нашей стороны - как набор констант препроцессора. Даже маленький шаг по созданию такого набора с инструкциями по использованию может существенно сократить количество согласований, правок, и необходимости что-то постоянно контролировать и подгонять. Причем многие типовые интерфейсы можно покрыть очень маленькими наборами значений. Например часто для длительностей достаточно набора из короткой (для реакций на действия пользователя), средней (для смены состояний компонентов) и большой (для глобальных перестановок в интерфейсе).
Итог:
✅ - Задание принято.
| transition-property: width height border background-color; | ||
| transition-duration: 0.3s | ||
| transform: translate(-50%, -50%) scale(0); | ||
| transition: transform 0.3s cubic-bezier(.35,.38,0,1.62) 0.4s, height 0.3s, width 0.3s, border 0.3s, background-color 0.3s; |
There was a problem hiding this comment.
☝️ - Такого рода длинные строки можно разбивать на несколько, и форматировать так, чтобы одинаковые сущности были ровно друг над другом. В большинстве случаев так будет проще бегло читать код. Не во всех проектах людьми приветствуются "лишние" пробелы, там есть разные аргументы по этому поводу, но если вы вообще никогда не пробовали так делать - то можно попробовать в этом проекте. Конкретно здесь сразу в глаза бросится затерявшийся в длинной строке факт того, что для большинства свойств пропущена временная функция. Это будет интерпретироваться как ease. Это так задумано? Или нет? Всегда лучше указать все в явном виде. Здесь оно может и не аукнется, но в другом месте такой сброс чего-то в значение по умолчанию может стать причиной плавающих багов, на которые придется тратить время на ровном месте.
🎓 Добавляем анимацию появления шапки
💥 https://htmlacademy-animation.github.io/403101-magic-vacation-1/2/