Прочитав эту статью, вы поймете, как реализовать и добавить привлекательные взаимодействия с кнопками в вашем приложении React. 🤘

Мы реализуем кнопку лайка с нуля. И мы не будем рассчитывать на помощь каких-либо внешних пакетов. Мы также добавим множество замечательных микровзаимодействий, которые выведут нашу простую кнопку на новый уровень. 🚀

Итак, без лишних слов, приступим! 👨‍💻

Первая часть, которую нам нужно реализовать, - это сам компонент React. Это будет простая кнопка, содержащая один SVG и текст. Кроме того, мы также хотим отслеживать состояние liked.

Я знаю, это немного. Но мы только начинаем. Хорошо то, что кнопка полностью работоспособна. И с небольшим стилем. На самом деле выглядит неплохо. 🤷

Но я позволю вам судить об этом. 😀

Кнопка оживления

Теперь, когда у нас есть кнопка, которая просто сидит там. Давайте придадим ему стиля и немного подвинем.

Мы разбиваем все происходящие взаимодействия и реализуем их одно за другим. И мы начнем с двух самых простых:

  • Изменение цвета фона
  • Замена текста "Нравится" на "Понравилось"

Для этих двух изменений нам нужно немного изменить наш код React. Мы просто добавим тег span, который сделает возможным изменение всего текста. Тег будет содержать суффикс текста «Нравится».

Так изменится код React. 👇

И когда мы применяем соответствующие стили.

Вот что мы получаем взамен 👇

Я бы сказал, что мы добились значительного прогресса. Кнопка уже выглядит намного лучше. И, честно говоря, я думаю, что он готов к запуску. В руки наших пользователей. Думаю, они определенно были бы счастливы. Цвет имеет плавный переход. И мы также очень изощренно трансформируем текст. ✨

Однако я думаю, что мы можем пойти еще дальше. И давайте просто добавим еще одно взаимодействие, которое немного приблизит нас к окончательному результату.

Добавление анимации клика

Это очень тонкое изменение. Но, на мой взгляд, просто отлично смотрится. И с точки зрения UX, это делает нашу кнопку более удобной для пользователя. Сама анимация уведомляет пользователя о том, что щелчок действительно произошел.

Так о чем именно я говорю? Каждый раз, когда нажимается кнопка. Мы медленно уменьшаем его, а затем возвращаем к исходному размеру. для этого нам нужно немного изменить наш компонент React. 🤏

Мы используем onAnimationEnd обработчик событий, чтобы сбросить состояние clicked обратно на false. Нам нужно сделать это так, чтобы анимация воспроизводилась снова и снова при каждом нажатии кнопки.

Теперь нам просто нужно применить дополнительный стиль. 🧑‍🎨

И наш компонент выглядит все лучше и лучше.

Анимация иконки SVG

Следующая часть кнопки, которая требует нашей любви и внимания, - это значок. Поскольку мы используем SVG, мы можем немного потрудиться. И под волшебством я имею в виду анимацию SVG с помощью CSS. 🧙

Сначала посмотрим на наш значок. Обратите внимание, что мы присвоили идентификаторы отдельным тегам. Это поможет нам идентифицировать их с помощью селекторов CSS.

Поначалу анимация SVG может показаться довольно запутанной. Но самое главное - не бояться. Это просто набор HTML-тегов. Бьюсь об заклад, они вас не пугают.

Из SVG выше мы выбираем элемент с идентификатором thumb-end и анимируем его каждый раз, когда пользователь наводит курсор на кнопку. Мы также хотим немного наклонить весь значок. Вот почему мы применяем преобразование ко всему тегу svg.

Последняя и самая интересная часть - это анимация hop. На самом деле в этом нет необходимости, но я думаю, что это делает все взаимодействие более увлекательным и игривым. Вы только посмотрите на это. 🤓

Добавление частиц

Мы медленно, но неуклонно приближаемся к концу. Последняя часть, которую нужно добавить, - это частицы. И снова нам нужно заглянуть внутрь нашего компонента. И немного его расширим.

Мы добавили один контейнер, в котором хранятся все частицы. А внутри мы сгенерировали 10 частиц. Каждый из них вращается, и вместе они образуют круг из частиц.

Проблема в том, что наша кнопка не круг, а прямоугольник. И по этой причине нам нужно абсолютно позиционировать начальную точку каждой частицы по краям нашей кнопки. Говоря словами CSS, это то, что нам нужно сделать.

Мы также применили boom анимацию к каждой частице. Итак, теперь, когда кнопка нажата. Мы празднуем, выпуская частицы. 🎉

Хотите верьте, хотите нет, но это все. Мы разобрали и реализовали каждое взаимодействие отдельно. И соединяя их вместе. Мы создали кнопку «Нравится» с помощью React. ⚛️

🏁 Заключение

В нашем примере используется множество взаимодействий. Вместе они могут показаться довольно сложными. Но когда мы разбиваем их и смотрим на них по очереди. Мы можем легко их решить и объединить в один красиво оформленный компонент. 🧱

🙏 Спасибо за чтение

Надеюсь, вам понравилась эта статья. Вся кодовая база доступна на Github. Если вы хотите оставаться на связи или читать похожие посты. Обязательно подписывайтесь на меня на Medium.

👏 Ставить лайк, делиться, комментировать

Если у вас есть какие-либо вопросы или опасения. Дайте мне знать в комментариях ниже.