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) |