اضافه کردن افکت Ripple در VueJs | ویو جی اس

شاید خیلی ها مثل من به انیمیشن ها و افکت های یک صفحه توجه میکنن
یکی از افکت های پر طرفدار چه در اندروید و چه در وبسایت ها افکت Ripple هست.

این افکت همراه با کتابخونه material design گوگل منتشر شده که یکی از بهترین فریمورک های طراحی رابط کاربردیه!

افکت های مشابه این خیلی زیاد شده ولی هیچ کدوم افکت متریال دیزاین نمیشه!

اگه با vue js آشنایی ندارید میتونید این مقاله رو مطالعه کنید.

خیلی از شرکت ها و گروه های برنامه نویسی با توجه به مستنداتی که گوگل برای مترالش ارائه کرده اومدن این متریال رو برای فریمورک هایی مثل Angular , Vue Js و React کامپوننت بندی کردن که با استفاده از اونها کار 10 برابر سریعتر و تمیزتر میشه
یکی از این کتابخونه ها VuetifyJs هست که با توجه به ستاره های گیت هاب معلومه که خیلی پرطرفداره
و ما میخوایم با استفاده از این کتابخونه این افکت رو به پروژمون اضافه کنیم

اگه با webpack آشنایی ندارید همین امروز برید دنبالش چون باهاش خیلی دقیق و تمیز میتونید پروژتون رو هندل بکنید.

نصب VuetifyJs

برای نصب میتونید از دستور زیر استفاده کنید. برای روش های دیگه نصب هم میتونید به اینجا سر بزنید.

npm install vuetify --save

بعد از نصب اگه میخواید از کل کتابخونه استفاده کنید در فایل app.js و فایل css پروژه کدهای زیر رو قرار بدید

//app.js
import vuetify from 'vuetify';
Vue.use(vuetify );

//app.scss
@import "~vuetify/dist/vuetify.css";

ولی اگه میخواید فقط این افکت اضافه بشه این کد رو توی app.js اضافه کنید.

import { Ripple } from 'vuetify/es5/directives';
Vue.directive('ripple', Ripple);

و کد زیری رو هم در app.scss یا فایل css پروژتون اضافه کنید.

.ripple__container {
  color: inherit;
  border-radius: inherit;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
  contain: strict;
}
.ripple__animation {
  color: inherit;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50%;
  background: currentColor;
  opacity: 0;
  -webkit-transition: 0.6s cubic-bezier(0, 0, 0.2, 1);
  transition: 0.6s cubic-bezier(0, 0, 0.2, 1);
  pointer-events: none;
  overflow: hidden;
  will-change: transform, opacity;
}
.ripple__animation--enter {
  -webkit-transition: none;
  transition: none;
}
.ripple__animation--visible {
  opacity: 0.2;
}

خب حالا فقط کافیه به هر المنتی که میخواید این افکت اضافه بشه v-ripple اضافه کنید

<button v-ripple>ویرگول!</button>

و اگه پروژه رو دیباگ کنید با این صحنه مواجه میشید ?

امیدوارم از اولین مطلب من لذت برده باشید.
اگه باز هم به همچین نکاتی برخوردم سعی میکنم پست کنم.

از شنیدن نظرهاتون خوشحال میشم ?