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

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


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

ripple Effect

نمونه افکت 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>

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

نمونه کار نهایی افکت ripple

با کلیک بر روی اون المنت افکت اجرا میشه (توی این تصویر کمی کند اجرا میشه)

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

میتونید نظرتون رو در ویرگول برام ارسال کنید.

نویسنده
نریمان موفقی
تاریخ
18/08/26
دسته بندی