Главная
Проекты на Vue
Кнопка с эффектом пульсации на Vue

Кнопка с эффектом пульсации на Vue

Создание интерактивных анимаций прямо на сайте — одна из тех задач, которые кажутся сложными, пока не попробуешь Vue.js. Этот современный фреймворк позволяет быстро и элегантно «оживлять» интерфейсы, управляя состоянием и поведением компонентов без лишнего кода. Например, анимация пульсации при клике по кнопке — типичный случай, где Vue значительно упрощает разработку, позволяя сосредоточиться на визуальной части, а не на сложной логике.

Ниже вы можете увидеть рабочий пример такого компонента — кликайте на кнопке, чтобы запустить эффект расходящихся волн.

<div id="app">
  <button class="app__btn" @click="createCircle">Кликни</button>
</div>

#app {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}
.app__btn {
  position: relative;
  overflow: hidden;
  width: 200px;
  height: 100px;
  color: #fff;
  background-color: #8E44AD;
  font-size: 24px;
}
.app__btn:focus-visible {
  outline: none;
}
.app__btn .circle {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: #fff;
  border-radius: 100vw;
  transform: translate(-50%, -50%) scale(0);
  animation: circle 0.5s ease-out;
}
@keyframes circle {
  to {
    transform: translate(-50%, -50%) scale(3);
    opacity: 0;
  }
}

const {createApp} = Vue
createApp({
  setup() {
    const createCircle = (e) => {
      let btn = document.querySelector('.app__btn')
      let rect = btn.getBoundingClientRect()
      const xInside = e.clientX - rect.left
      const yInside = e.clientY - rect.top
      let circle = document.createElement('div')
      circle.classList.add('circle')
      circle.style.top = yInside + 'px'
      circle.style.left = xInside + 'px'
      btn.appendChild(circle)
      setTimeout(() => {
        circle.remove()
      }, 500)
    }
    return {createCircle}
  }
}).mount('#app')

Внимание! Представленный код — это готовый компонент, но для его работы на странице должен быть установлен и подключен фреймворк Vue. Если вы начинающий разработчик, просто добавьте строку
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
в раздел <head> вашего HTML, и всё заработает.

Объяснение логики работы компонента

Этот компонент создаёт визуальную анимацию «пульсации» в точке клика на кнопке. Вот как это работает:

Структура (HTML)

Основа — контейнер #app и кнопка с классом .app__btn
На кнопку установлен обработчик события @click="createCircle", который запускает анимацию

Стили (CSS)

Элемент .circle — абсолютно позиционированный круг с белым фоном
Изначально скрыт трансформацией scale(0)
Анимация @keyframes circle плавно увеличивает круг и уменьшает его прозрачность
Кнопка имеет position: relative и overflow: hidden, что ограничивает распространение анимации

Логика (Vue.js)

Функция createCircle получает объект события e, содержащий информацию о клике
С помощью getBoundingClientRect() получаются точные координаты и размеры кнопки относительно окна браузера

Вычисляются координаты клика относительно левого верхнего угла кнопки:

e.clientX - rect.left — горизонтальное смещение от левого края кнопки
e.clientY - rect.top — вертикальное смещение от верхнего края кнопки

Создаётся новый элемент div, которому присваивается класс circle для применения анимации
Вычисленные координаты устанавливаются как top и left для позиционирования круга
Круг добавляется внутрь кнопки методом appendChild
Через 500 мс (длительность анимации в CSS) круг автоматически удаляется

Ключевые преимущества реализации

Использование getBoundingClientRect() — более современный и точный способ получения координат элементов
Анимация всегда возникает точно в месте клика, создавая прямой визуальный отклик на действие пользователя
Vue обеспечивает удобное связывание события с методом, а остальная логика работает на чистом JavaScript
Автоматическое удаление элементов предотвращает накопление ненужных DOM-элементов

Почему это эффективно:

Компонент демонстрирует идеальное сочетание простоты и интерактивности — минимальным кодом достигается запоминающийся визуальный эффект, который улучшает пользовательский опыт.

Нравится эффект?

Представленный выше компонент — наглядный пример того, как Vue.js упрощает создание интерактивных анимаций. Мы разобрали код по косточкам, чтобы вы могли понять механику и использовать её в своих проектах. Если вам нужны нестандартные UI-решения, обращайтесь — мы с удовольствием воплотим ваши идеи в современных и отзывчивых компонентах.

Предыдущий Следующий