https://virgool.io/feed/@nariman.movaffaghi برنامه نویس وب | Full Stack Developer fa 2026-06-07 11:30:12 https://files.virgool.io/upload/users/9840/avatar/bmmyYH.png?height=120&width=120 https://virgool.io/@nariman.movaffaghi https://virgool.io/JavaScript8/%D8%A7%D8%B6%D8%A7%D9%81%D9%87-%DA%A9%D8%B1%D8%AF%D9%86-%D8%A7%D9%81%DA%A9%D8%AA-ripple-%D8%AF%D8%B1-vuejs-%D9%88%DB%8C%D9%88-%D8%AC%DB%8C-%D8%A7%D8%B3-yy0mosvtfyz0 شاید خیلی ها مثل من به انیمیشن ها و افکت های یک صفحه توجه میکننیکی از افکت های پر طرفدار چه در اندروید و چه در وبسایت ها افکت 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>و اگه پروژه رو دیباگ کنید با این صحنه مواجه میشید ? با کلیک بر روی اون المنت افکت اجرا میشه (توی این تصویر کمی کند اجرا میشه)امیدوارم از اولین مطلب من لذت برده باشید.اگه باز هم به همچین نکاتی برخوردم سعی میکنم پست کنم.از شنیدن نظرهاتون خوشحال میشم ? نریمان موفقی نریمان موفقی Wed, 30 May 2018 13:06:18 +0430