Могу посоветовать почитать про то, как настроить prefers-reduced-motion для вашего браузера. Если разработчики сайта позаботились об этом, раздражающих анимаций должно остаться меньше.
Ну ок, вы сделали это не на javascript, а на css - вероятно это будет чуть меньше жрать процессор и память (не факт). Кроме как похвастаться другому дизайнеру - эти кнопочки полезнее не стали.
Вы же понимаете, что верстальщик ≠ дизайнер 😅 Моя задача выполнить поставленную задачу так, чтобы ваш вентилятор разгонялся чуть медленнее 😊
Вероятно также думали разработчики, которые писали на jQuery в своё время (не смотря на всю разницу между jQuery и TS). Предлагаю все таки придерживаться каких-то правил и указывать TS, если речь идёт о TS, и JS, если речь идёт о чистом JS. Иначе многие начинающие разработчики могут не понять неожиданный синтакс.
В заголовке указан JavaScript, а в примерах TypeScript. Наверное, не стоит подразумевать, что все JavaScript разработчики пишут на последнем. Тем более, что эту статью могут найти через много лет, когда TS может быть уже не таким популярным, и это введёт в заблуждение.
Так разве не для этого все разбивается на небольшие компоненты, чтобы из них можно было собрать хоть туду-лист, хоть космодром? Поддерживаю ответившего выше, про «ускорить разработку» заявление сомнительное. Prop-types обычно хватает за глаза.
По поводу анимации волны на CSS. Печально что приходится использовать JS для визуального эффекта. Могу предложить CSS only решение, которое использовал в одном проекте (разница лишь в том, что волна всегда будет начинаться в центре кнопки:
// Cначала задаете стили для "волны" и скрываете ее через transform
.btn:before {
...
transform: scale(0,1);
}
// Имитируте клик по кнопке и добавляете необходимую анимацию
.btn:focus:not(:active):before {
animation: wave-animation ...;
}
// Анимация
@keyframes wave-animation {
0% {
opacity: 0;
transform: scale(0,1);
}
50% {
opacity: 1;
transform: scale(.5,1);
}
100% {
opacity: 0;
transform: scale(1,1);
}
}
Я не совсем разбираюсь в теме, но совсем давно вроде бы считалось, что основные цвета — это красный, синий и желтый, из которых можно было получить любой другой цвет. Всегда было интеренсо, почему желтый заменили на зеленый, и как из красного, зеленого и синего получить сложением желтый?
У заказчика в шаблоне не отображались социальные иконки типа Twitter, Facebook и т.п. Все стили перепроверил вдоль и поперек пока на SO не посоветовали заказчику отключить Adblock. Казалось бы они там еще даже ссылок не было на социальные сервисы, просто иконки типа:
До сих пор не понимаю, как можно работать с мобильного телефона полноценно. Читать — без проблем, а вот писать что-либо или выполнять другие задачи считаю проблемным.
Обновил пример с учетом
prefers-reduced-motion.Определенно, в настоящем проекте я бы остановился на JS решении.
Могу посоветовать почитать про то, как настроить prefers-reduced-motion для вашего браузера. Если разработчики сайта позаботились об этом, раздражающих анимаций должно остаться меньше.
Спасибо за комментарий!
Вы же понимаете, что верстальщик ≠ дизайнер 😅 Моя задача выполнить поставленную задачу так, чтобы ваш вентилятор разгонялся чуть медленнее 😊
Вероятно также думали разработчики, которые писали на jQuery в своё время (не смотря на всю разницу между jQuery и TS). Предлагаю все таки придерживаться каких-то правил и указывать TS, если речь идёт о TS, и JS, если речь идёт о чистом JS. Иначе многие начинающие разработчики могут не понять неожиданный синтакс.
В заголовке указан JavaScript, а в примерах TypeScript. Наверное, не стоит подразумевать, что все JavaScript разработчики пишут на последнем. Тем более, что эту статью могут найти через много лет, когда TS может быть уже не таким популярным, и это введёт в заблуждение.
http://codepen.io/Deka87/pen/zNJyqg.
Имеется ввиду любая форма ввода, или же не содержащая полей для ввода пароля и данных платежных карт?
Иногда достаточно просто подписаться на RSS ленту того же Upwork почти с мгновенным уведомлением.