Дополню ещё: Если допустим делаем выезжающую боковую панель, то изначальные позиции предположим у нас top: 0; left: 0, то есть левый верхний угол. Чтобы спрятать его из видимости, мы прописываем transform: translateX(-100%) (но учитывайте ещё что у вас будут тени, так что нужно делать например -120%, в общем на глаз сами смотрите). При нажатии на кнопку нужно чтобы панель открылась(т.е отобразилась), прописываем transform: translateX(0). И вот проблема в том, что при первом открытии/обновлении страницы, видна анимация перехода в закрытое состоянии, то есть уходит в левую часть чтобы спрятаться. В таком случае я в первом состоянии(то есть когда он должен быть скрыт) указал visibility: hidden, а во втором состоянии, когда он открывается при клике, visibility: visible.(никакие другие свойства например display: none или свойство прозрачности opacity не подходят, это я так, на всякий случай говорю). Теперь у нас не будет анимации перехода из одного состояния в другое при открытии/обновлении страницы.
Спасибо, верные мысли! Дополню дополнение :) Чтобы при загрузке страницы не было артефактов анимаций и переходов, чтобы страница не дергалась, есть ещё такой подход: через JS на событие DOMContentLoaded на body добавляется класс, допустим, is-dom-loaded, затем все привязки свойства transition к элементам делаем через этот класс. .is-dom-loaded .button { transition-duration: 0.2s; } Или в случае с «выезжающим» меню: .overlay-menu:not(.is-active) { translate: -100%; } .is-dom-loaded .overlay-menu { transition-duration: 0.2s; } Все эти темы ещё подробно разберём на мастер-классах.
Спасибо за ролик, всегда что-нибудь новенькое для себя узнаю. Сегодня, например, про отражение :) Не знаю, когда оно мне понадобится, но выглядит прикольно. И вот интересно кстати реальные примеры применения этих штук узнать. Я правильно поняла, что обычная практика использовать транслейт для выдвигания мобильного меню?
Хотелось бы узнать, как правильно прописывать свойства анимаций(минимальное требуемое время анимаций и т.п) для полноценной плавной работы без тормозов? И правильно я понимаю, что для обьектов, которые будем анимировать, внутри них нельзя делать много обьектов, иначе анимации в любом случае начнут тормозить, независимо от того, какие настройки для трансформации мы пропишем?
Если мы говорим именно об анимациях, а не о переходах, то длительность анимации - всегда сугубо частный случай, зависящий от того что и как анимируем. Для переходов же я выявил для себя оптимальное значение длительности в 0.2 секунды, не слишком медленное и не слишком быстрое. Про «тормоза» вопрос ещё более сложный. Но количество элементов в анимириуемом объекте точно влияет на перформанс. Однако есть небольшой хак - свойство will-change, применяемое к анимируемому элементу, которое говорит браузеру о том, чтобы он уделил больше внимания конкретному элементу и его конкретному анимируемому свойству. Я хотел рассказать о will-change в рамках курса, но решил опустить эту тему, так как она новичкам не особо нужна.
Ролик как всегда отличный и информативный! Правильно ли я понял, что на практике когда мы воздействуем на одиночный элемент, то разумнее использовать translate , чтобы его передвинуть в нужном направлении? А когда воздействуем на несколько элементов, то лучше использовать "флексы" или "гряды"?
Привет! Спасибо за фидбек :) Отвечая на вопрос - нет, не совсем, translate нужен лишь в анимациях и переходах, то есть, например, когда «оживляем» какую-то кнопку и при наведении хотим добавить эффект тряски по горизонтали, в таком случае как раз нужно свойство translate. В грамотной верстке не должно возникать ситуаций, когда нужно что-то «подвинуть». Используя флексы и гриды с правильными параметрами браузер должен самостоятельно располагать элементы так, как это сделано дизайнером на макете. С практикой эти вопросы сами по себе отпадут. Пока не заморачивайся сильно. Поверстаешь макет-другой и всё будет само собой получатся! :)
Насколько часто сейчас используют отдельный свойства translate, scale, rotate в реальной практике? Можно ли говорить о том, что их уже можно применять в любом проекте или лучше "обезопасить" себя и все же использовать transform?
Эти новые свойства имеют поддержку 92% браузеров, а это достаточно для того, чтобы применять их на реальных проектах. Да и к тому же, зачастую на проектах используются препроцессор стилей, который можно настроить так, чтобы на выходе в обработанном css-файле эти свойства заменились на функции в старом добром transform. Так, к примеру, работает postcss плагин preset-env. То есть мы пишем в новом синтаксисе, а сборщик проекта обработает код так, чтобы он работал в бОльшем количестве браузеров, чем 92%.
Кот на заднем плане огонь, как и ты 😺
Хотелось бы обзорное видео про кота :) Или хотя бы просто его со всех сторон поглядеть. В конце какого-нибудь урока.
Комментарий для продвижения качественного образовательного контента, успехов.
Отзеркаливание - крутяк!
Спасибо за видео!
Не знал про новые отделтные свойства translate и другие.
Спасибо!)
Лайк!!! Пушка
Спасибо за ролик! Как всегда, все ёмко и понятно.
Хороший контент, заморочился)
Коротко, но супер круто и понятно. Очень благодарна вам.
Спасибо за познавательный урок!)
С трансформацией можно поиграться делая логотипы для сайта. Да и в целом в некоторых вещах пригодится.
Просто лучший:)
Спасибо за курс, все понятно и по делу. Лайк 👍
Дополню ещё:
Если допустим делаем выезжающую боковую панель, то изначальные позиции предположим у нас top: 0; left: 0, то есть левый верхний угол. Чтобы спрятать его из видимости, мы прописываем transform: translateX(-100%) (но учитывайте ещё что у вас будут тени, так что нужно делать например -120%, в общем на глаз сами смотрите). При нажатии на кнопку нужно чтобы панель открылась(т.е отобразилась), прописываем transform: translateX(0). И вот проблема в том, что при первом открытии/обновлении страницы, видна анимация перехода в закрытое состоянии, то есть уходит в левую часть чтобы спрятаться. В таком случае я в первом состоянии(то есть когда он должен быть скрыт) указал visibility: hidden, а во втором состоянии, когда он открывается при клике, visibility: visible.(никакие другие свойства например display: none или свойство прозрачности opacity не подходят, это я так, на всякий случай говорю). Теперь у нас не будет анимации перехода из одного состояния в другое при открытии/обновлении страницы.
Спасибо, верные мысли!
Дополню дополнение :) Чтобы при загрузке страницы не было артефактов анимаций и переходов, чтобы страница не дергалась, есть ещё такой подход: через JS на событие DOMContentLoaded на body добавляется класс, допустим, is-dom-loaded, затем все привязки свойства transition к элементам делаем через этот класс.
.is-dom-loaded .button {
transition-duration: 0.2s;
}
Или в случае с «выезжающим» меню:
.overlay-menu:not(.is-active) {
translate: -100%;
}
.is-dom-loaded .overlay-menu {
transition-duration: 0.2s;
}
Все эти темы ещё подробно разберём на мастер-классах.
@@AleksanderLamkovспасибо, возьму на заметку)
Спасибо за ролик, всегда что-нибудь новенькое для себя узнаю. Сегодня, например, про отражение :)
Не знаю, когда оно мне понадобится, но выглядит прикольно.
И вот интересно кстати реальные примеры применения этих штук узнать. Я правильно поняла, что обычная практика использовать транслейт для выдвигания мобильного меню?
Да, для мобильного меню как раз translate отлично подходит :)
Пасиба Саня, все по теме и супер быстро
Всё отлично, без воды, спасибо. Только хотел немного докопаться: вы говорите бейзер, а это Безье. Кривые Безье.
Привет! Спасибо за поправку, и правда, всегда выговаривал эту функцию неправильно, не замечал :)
Коммент в поддержку
Хотелось бы узнать, как правильно прописывать свойства анимаций(минимальное требуемое время анимаций и т.п) для полноценной плавной работы без тормозов? И правильно я понимаю, что для обьектов, которые будем анимировать, внутри них нельзя делать много обьектов, иначе анимации в любом случае начнут тормозить, независимо от того, какие настройки для трансформации мы пропишем?
Если мы говорим именно об анимациях, а не о переходах, то длительность анимации - всегда сугубо частный случай, зависящий от того что и как анимируем.
Для переходов же я выявил для себя оптимальное значение длительности в 0.2 секунды, не слишком медленное и не слишком быстрое.
Про «тормоза» вопрос ещё более сложный. Но количество элементов в анимириуемом объекте точно влияет на перформанс. Однако есть небольшой хак - свойство will-change, применяемое к анимируемому элементу, которое говорит браузеру о том, чтобы он уделил больше внимания конкретному элементу и его конкретному анимируемому свойству. Я хотел рассказать о will-change в рамках курса, но решил опустить эту тему, так как она новичкам не особо нужна.
Можно shorts про will-change 😂
@user-me5lo4ib7q отличная идея, спасибо!
Ролик как всегда отличный и информативный! Правильно ли я понял, что на практике когда мы воздействуем на одиночный элемент, то разумнее использовать translate , чтобы его передвинуть в нужном направлении? А когда воздействуем на несколько элементов, то лучше использовать "флексы" или "гряды"?
Привет! Спасибо за фидбек :)
Отвечая на вопрос - нет, не совсем, translate нужен лишь в анимациях и переходах, то есть, например, когда «оживляем» какую-то кнопку и при наведении хотим добавить эффект тряски по горизонтали, в таком случае как раз нужно свойство translate.
В грамотной верстке не должно возникать ситуаций, когда нужно что-то «подвинуть». Используя флексы и гриды с правильными параметрами браузер должен самостоятельно располагать элементы так, как это сделано дизайнером на макете.
С практикой эти вопросы сами по себе отпадут. Пока не заморачивайся сильно. Поверстаешь макет-другой и всё будет само собой получатся! :)
Насколько часто сейчас используют отдельный свойства translate, scale, rotate в реальной практике? Можно ли говорить о том, что их уже можно применять в любом проекте или лучше "обезопасить" себя и все же использовать transform?
Эти новые свойства имеют поддержку 92% браузеров, а это достаточно для того, чтобы применять их на реальных проектах.
Да и к тому же, зачастую на проектах используются препроцессор стилей, который можно настроить так, чтобы на выходе в обработанном css-файле эти свойства заменились на функции в старом добром transform. Так, к примеру, работает postcss плагин preset-env. То есть мы пишем в новом синтаксисе, а сборщик проекта обработает код так, чтобы он работал в бОльшем количестве браузеров, чем 92%.
Будут ли в ближайшем будущем видео про JS?
Привет! Будут через месяца два. Сразу после курса по CSS будет ряд мастер-классов по верстке и более углубленные темы.
@@AleksanderLamkov Уточните, пожалуйста, а сколько ещё уроков будет в рамках этого курса?
21 в курсе «для начинающих»
@@AleksanderLamkov Спасибо за ответ!
мелкий код. смотреть под микроскопом надо, чтобі все рассмотреть
Слушай, ну ты первый, кто за год существования моего канала на это жалуется. Или ты с телефона смотришь?
На ПК все прекрасно видно!