@vkdesktop/vue-ripple

Компонент для создания ripple эффекта при клике.

Usage no npm install needed!

<script type="module">
  import vkdesktopVueRipple from 'https://cdn.skypack.dev/@vkdesktop/vue-ripple';
</script>

README

vue-ripple

Компонент для создания ripple эффекта при клике.

Вы можете посмотреть на живой пример.

Установка

npm i @vkdesktop/vue-ripple

Особенности

Анимация не затрагивает контент, а заливается под ним.
Работает лучше, чем другие варианты на Vue.
Можно менять скорость анимации через css.
На компонент можно вешать события, чтобы не использовать лишний блок.

Использование

// Тег script в компоненте

import Ripple from '@vkdesktop/vue-ripple';

export default {
  components: {
    Ripple
  },
  // ...
}

<!-- Тег template в компоненте -->

<Ripple>
  <div class="rippled-button">Кнопка с ripple эффектом</div>
</Ripple>

Параметры

Название	Описание	Тип	По умолчанию
color	Цвет эффекта	String	rgba(255, 255, 255, .3)