
در قسمت قبل با نحوه اضافه کردن انیمیشن به v-if آشنا شدیم اما توجه داشته باشید که تمام مطالب جلسه قبل روی v-show نیز قابل پیاده شدن است. در این جلسه می خواهم در رابطه با بعضی از ریزه کاری های دیگر انیمیشن ها صحبت کنم. برای شروع این جلسه، به فایل App.vue رفته و از <transition> مربوط به افکت Fade یک کپی بگیرید:
// بقیه کد ها // <br /> <br /> <transition name="fade"> <div class="alert alert-info" v-if="show">This is some Info</div> </transition> <transition name="slide" type="animation"> <div class="alert alert-info" v-if="show">This is some Info</div> </transition> <transition name="fade"> <div class="alert alert-info" v-if="show">This is some Info</div> </transition> // بقیه کد ها //
سپس مقدار Show را در data خود روی true می گذاریم تا کادرهای info به صورت پیش فرض همیشه در حال نمایش باشند:
<script> export default { data() { return { show: true }; } }; </script>
در حال حاضر اگر به مرورگر رفته و صفحه را refresh کنید هر سه کادر info را مشاهده خواهید کرد. مشکل اینجاست که ما می خواهیم در همان ابتدای بارگذاری صفحه، انیمیشن ها اجرا شوند تا صفحه زیبایی خود را حفظ کند. این دقیقا کاری است که با transition سوم انجام خواهیم داد. برای انجام این کار کافی است که خصوصیت appear را به transition بدهید:
<transition name="fade" appear> <div class="alert alert-info" v-if="show">This is some Info</div> </transition>
حالا با refresh کردن صفحه، کادر سوم که خصوصیت Appear را گرفته است با انیمیشن نرمی ظاهر می شود. وظیفه داشتم این موضوع را نیز تکمیل کنم، حالا می توانیم به سراغ مبحث بعدی برویم.
فهرست محتوای این مقاله
Animate.CSS
آیا با animate.css آشنا هستید؟ animate.css یک کتابخانه CSS از انیمیشن های مختلف است که می توانید از آن در پروژه هایتان استفاده کنید. نحوه کار آن بدین شکل است که باید ابتدا آن را از سایت زیر دانلود کنید:
https://daneden.github.io/animate.css/
سپس با اتصال کلاس های CSS خاصی که در این کتابخانه تعریف شده است، می توانید انیمیشن ها را به این عناصر اضافه کنید. توضیحات بیشتر و لیست تمام کلاس ها در صفحه گیت هاب این کتابخانه موجود است:
https://github.com/daneden/animate.css
من برای راحتی کار از لینک CDN آن استفاده می کنم:
<head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css"> </head>
شما باید این کد را درون فایل index.html خود (بین تگ های head) قرار دهید. من آن را بعد از لینک بوت استرپ قرار می دهم:
<head> <meta charset="utf-8"> <title>Vue Animations</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css"> </head>
مشکل ما این است که هر نامی را برای انیمیشن خود انتخاب کنیم، فریم ورک Vue از همان نام برای تمام کلاس ها استفاده خواهد کرد (مثلا fade باعث تولید کلاس های fade-enter و Fade-enter-active و الی آخر می شود). در صورتی که در این کتابخانه برای استفاده از انیمیشن ها، ابتدا باید کلاس animated را اضافه کرده و سپس از لیست کلاس های موجود، انیمیشن خاص خود را انتخاب کرده و کلاس مربوط به آن را نیز اضافه کنیم (مثلا animated flash). با این حساب چطور به Vue بگوییم از کلاس های مختلفی استفاده کند؟ فریم ورک Vue این مسئله را نیز در نظر گرفته و برای آن attribute های خاصی را تعریف کرده است.
اگر ما name را روی transition مشخص کنیم از کلاس های پیش فرض استفاده می شود (fade-enter و fade-enter-active الی آخر) اما می توانیم خودمان کلاس های آن را مشخص کنیم:
<transition appear enter-class="" enter-active-class="animated bounce" leave-class="" leave-active-class="animated shake" > <div class="alert alert-info" v-if="show">This is some Info</div> </transition>
از آنجایی که نیازی به تعریف مقداری برای enter-class و leave-class نداشته ام، آن ها را خالی گذاشته ام. کد بالا به خاطر خالی بودن این کلاس ها به ما خطا می دهد بنابراین من آن ها را پاک می کنم (آن ها را در این قسمت نوشتم که شما بدانید چه شکلی دارند):
<transition appear enter-active-class="animated bounce" leave-active-class="animated shake"> <div class="alert alert-info" v-if="show">This is some Info</div> </transition>
حالا کد بالا را ذخیره می کنم و به مرورگر می روم. واضح است که با refresh شدن صفحه، انیمیشن های ما اجرا می شوند.
استفاده از nameهای پویا
نکته جالب دیگری وجود دارد که قبل از تمام شدن این جلسه باید آن را بررسی کنیم. ثابت بودن خصوصیت name الزامی نیست! بگذارید به شما نشان بدهم که منظورم چیست. در همان فایل App.vue کد های Template را به شکل زیر تغییر دهید تا یک عنصر Select نیز داشته باشیم:
// بقیه کد ها // <h1>Animations</h1> <hr /> <select v-model="alertAnimation" class="form-control"> <option value="fade">Fade</option> <option value="slide">Slide</option> </select> <br /> <br /> <button class="btn btn-primary" @click="show = !show">Show Alert</button> // بقیه کد ها //
کلاس form-control یکی از کلاس های بوت استرپ است که به زیباتر شدن فرم کمک می کند و اضافه کردن آن فقط به دلایل ظاهری است. همانطور که می بینید در کد بالا یک منوی select داریم که دو گزینه fade و slide را دارد. این select با دستور v-model به خصوصیتی به نام alertAnimation متصل شده است بنابراین باید این خصوصیت را نیز در قسمت data تعریف کنیم:
<script> export default { data() { return { show: true, alertAnimation: "fade" }; } }; </script>
همانطور که می بینید مقدار پیش فرض آن روی fade تنظیم شده است اما شما می توانید هر مقدار دیگری را برای آن انتخاب کنید. همانطور که می دانید، با استفاده از v-bind می توانیم مقادیر پویا را به یک خصوصیت پاس بدهیم (اگر خصوصیتی را بدون v-bind تنظیم کنیم، مقدار پویا نمی گیرد و رشته داخلش را به عنوان یک رشته ساده و مستقیم دریافت می کند – مانند name تا اینجای کار). بنابراین می توانیم به راحتی بگوییم:
<transition :name="alertAnimation"> <div class="alert alert-info" v-if="show">This is some Info</div> </transition> <transition name="slide" type="animation"> <div class="alert alert-info" v-if="show">This is some Info</div> </transition> <transition appear enter-active-class="animated bounce" leave-active-class="animated shake"> <div class="alert alert-info" v-if="show">This is some Info</div> </transition>
یعنی برای transition اول، name را با v-bind (علامت اختصاری دو نقطه) روی alertAnimation تنظیم کرده ام. حالا اگر به مرورگر بروید شاهد تغییر جالب انیمیشن ها خواهید بود. از آنجایی که انیمیشن پیش فرض را روی fade تنطیم کرده ایم، در ابتدا کادر اول روی fade است اما اگر از منوی select مقدار slide را انتخاب نماییم، انیمیشن نیز تغییر می کند.
- نصب و راهاندازی فریمورک VueJS
- مثالی قویتر و نصب محلی Vue
- درکی ساده از Tamplateها در Vue
- درک بهتر Directiveها + برخی از Directiveهای مشهور
- تعامل با Event Listenerها
- قدرت Vue با انواع Modifierها
- مبحث two-way-binding و پاسخ به تغییرات
- خصوصیات محاسبهشده (Computed Properties)
- روش جایگزین خصوصیات Computed
- استایلدهی پویا با اشیاء
- استایلدهی پویا اسمی بدون استفاده از کلاسها
- ایجاد شرط با v-if
- نمایش لیستها با v-for
- گردش درون اشیاء
- رهگیری عناصر در v-for
- اولین پروژه تمرینی – آمادهسازی اولیه
- پیادهسازی منطق شروع بازی
- تکمیل دکمه Attack
- کدنویسی متدهای باقیمانده در بازی
- نمایش log و اتمام پروژه
- آشنایی و تعامل بیشتر با شیء Vue
- نحوه مدیریت دادهها در شیء Vue
- استفاده از ref$ در قالبهای HTML
- آشنایی با Mount کردن Templateها
- نحوه بهروزرسانی DOM و چرخه زندگی شیء Vue
- استفاده از Lifecycleها در عمل
- راهاندازی سرور محلی Vue
- آشنایی با Vue CLI
- درک بهتر فایلهای Vue
- آشنایی با کامپوننتها
- ساخت کامپوننتها
- استفاده از کامپوننتها و قوانین آن
- ارتباط بین کامپوننتها با Props
- اعتبارسنجی Props
- رویدادهای شخصیسازیشده
- ارتباط بین کامپوننتهای خواهر و برادر
- استفاده از یک شیء سراسری Vue
- آشنایی با Slotها
- بررسی جزئیات بیشتری از Slotها
- قابلیتی جدید به نام Dynamic Components
- مرگ کامپوننتهای پویا
- فصل جدید و پروژه جدید
- پروژه Quote – پاسدادن دادهها با Prop
- پروژه Quote – تکمیل ثبت Quote
- تکمیل پروژه Quoteها
- فصل جدید، کار با فرمها
- کار با عناصر Textarea
- عناصر Checkbox و Radiobutton
- کار با منوهای آبشاری و جزئیات v-model
- تعریف عناصر شخصیسازیشده
- نگاهی عمیقتر به Directiveها
- ساخت یک Directive شخصی
- ثبت محلی Directiveها + قدمی پیشرفتهتر
- آشنایی با Filterها
- جایگزینی برای Filterها
- آشنایی با Mixinها
- جزئیات تکمیلی در مورد Mixinها
- آشنایی با انیمیشنها در Vue
- استفاده عملی از Transition و Animation
- ترکیب Transition و Animation
- استفاده از کلاسهای CSS مختلف
- تبدیل عناصر مختلف به یکدیگر با انیمیشن
- اعمال انیمیشن با جاوا اسکریپت
- کدنویسی متدهای مربوط به hookهای جاوا اسکریپتی
- تکمیل انیمیشن جاوا اسکریپتی + کامپوننتهای پویا
- ساخت یک لیست برای انیمیشنهای گروهی
- اضافهکردن انیمیشن به لیست ساختهشده
- مینی پروژه فصل – سوالات ریاضی
- تکمیل پروژه و اضافهکردن انیمیشن
- فصل جدید، درخواستهای HTTP
- ارسال اطلاعات به Firebase
- دریافت دادهها از Firebase
- آشنایی با Interceptorها در Vue-Resource
- آشنایی با مفهوم Resource در Vue-Resource
- جزئیات تکمیلی Resourceها
- فصل جدید، آشنایی با Routing
- آشنایی با Routing Modes و اضافهکردن لینکها
- استایلدهی لینک فعال
- ایجاد Navigation با کد و پارامترهای URL
- واکنش به تغییرات URL و پارامترهای آن
- ساخت URLهای پویاتر با Named Routes
- مباحث Query Parameter و Redirection
- مبحث Redirect و اضافهکردن انیمیشن
- پاسدادن # و کنترل عملیات اسکرول
- محافظت از Routeها با استفاده از Gaurdها (قسمت اول)
- محافظت از Routeها با استفاده از Gaurdها (قسمت دوم)
- بارگذاری Routeها به صورت lazy
- فصل جدید، آشنایی با VueX
- نحوهی پیادهسازی اولیهی پکیج VueX
- آشنایی با Getterها در VueX
- اتصال خودکار Getterها به خصوصیات
- حل مشکل ترکیب Getterها و Computed Props
- آشنایی با مبحث Mutation در VueX
- آشنایی با Actionها در Mutations
- درک عملیاتهای پشت صحنه در mapActions
- خلاصهی جلسات قبل + معرفی مشکلی جدید
- اعمال two-way-binding در VueX
- ماژولار کردن مدیریت State در VueX
- استفاده از Namespaceها در VueX
- فصل جدید، پروژهی نهایی دوره
- پیادهسازی Header یا Navigation سایت
- ایجاد ساختار برای قسمت سهام (stocks)
- اضافهکردن منطق دکمهی Buy
- پیادهسازی VueX روی پروژه
- تعریف Mutationهای ماژول Portfolio در VueX
- پیادهسازی Getters برای ماژول Portfolio در VueX
- تکمیل کامپوننت Portfolio و نمایش سهام
- اعتبارسنجی برای فروش سهام و استفاده از فیلترها
- نمایش Funds و اعتبارسنجی برای خرید سهام
- پایان دادن به روز + اضافه کردن انیمیشن به صفحات
- پیادهسازی drop-down و راهاندازی Firebase
- ذخیره و دریافت قیمتها با درخواستهای PUT و GET
- تکمیل دکمهی Load Data و کار با Vue dev Tools
- خروجیگرفتن نهایی از برنامه برای قرارگیری روی سرور
- فصل پیوست ۱: استفاده از axios به جای vue-resource
- فصل پیوست ۱: درخواست GET در axios
- فصل پیوست ۱: استفاده از Interceptorها در Axios
- فصل پیوست ۲: احراز هویت در برنامههای SPA
- فصل پیوست ۲: ساخت کاربر جدید با ایمیل و رمز عبور
- فصل پیوست ۲: دریافت توکن احراز هویت در مرورگر
- فصل پیوست ۲: تکمیل منطق برنامه و کدهای باقیمانده
- فصل پیوست ۲: پیوست توکن به درخواستهای خروجی
- فصل پیوست ۲: بهینهسازی برنامه و Path Guard
- فصل پیوست ۲: اضافهکردن مکانیسم logout از حساب
- فصل پیوست ۲: پیادهسازی logout خودکار از حساب
- فصل پیوست ۲: ذخیرهی دادهها در localStorage
- فصل پیوست ۲: پیادهسازی فرآیند login خودکار
- فصل پیوست ۳: فصل جدید، اعتبارسنجی دادههای کاربر
- فصل پیوست ۳: ارائهی فیدبک اعتبارسنجی در UI
- فصل پیوست ۳: آشنایی با Validatorهای عددی
- فصل پیوست ۳: آشنایی با Validatorهای رمز عبور
- فصل پیوست ۳: آشنایی با requiredUnless
- فصل پیوست ۳: اعتبارسنجی آرایههای پویا
- فصل پیوست ۳: ثبت فرم و اعتبارسنجیهای ناهمگام
- فصل پیوست ۴: نسخهی 3 از Vue CLI
- فصل پیوست ۴: آشنایی با پروژه در CLI جدید
- فصل پیوست ۴: استفاده و کار با پلاگینها در CLI جدید
- فصل پیوست ۴: آشنایی با Environment Variables
- فصل پیوست ۴: خروجی گرفتن از برنامه نهایی
- فصل پیوست ۴: شخصیسازی بیشتر Build
- فصل پیوست ۴: استفاده از GUI
سلام . چرا دوره رو ادامه نمیدین؟لطفا پاسخگو باشین