
تا این قسمت از کار یکی از عناصر را با انیمیشن ظاهر کرده و سپس همان را خارج می کردیم اما در بسیاری از اوقات می خواهیم کار دیگری را انجام بدهیم. در بسیاری از اوقات لازم است که هم زمان با مخفی شدن یک عنصر، عنصر دیگری ظاهر شود. به عبارت دیگر به جای تعریف انیمیشن برای حذف یا نمایش عنصر، نیاز به تعریف انیمیشن برای تبدیل عناصر به یکدیگر داریم.
برای شروع این جلسه به فایل App.vue رفته و از transition دارای alertAnimation یک کپی بگیرید. همچنین به قسمت style ها رفته مدت زمان transition را در slide-leave-active از سه ثانیه به یک ثانیه تغییر دهید تا همه چیز مرتب و بدون مشکل باشد:
.slide-leave-active { animation: slide-out 1s ease-out forwards; transition: opacity 1s; opacity: 0; }
سپس برای transition:
<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="alertAnimation"> <div class="alert alert-info" v-if="show">This is some Info</div> </transition>
حالا مجموعا چهار transition داریم. برای اینکه بتوانیم با انیمیشن دو عنصر را به یکدیگر تبدیل کنیم حداقل به دو عنصر نیاز داریم بنابراین در transition تازه کپی شده یک div دیگر ایجاد می کنیم:
<transition :name="alertAnimation"> <div class="alert alert-info" v-if="show">This is some Info</div> <div class="alert alert-warning" v-if="!show">This is some Warning</div> </transition>
همانطور که مشاهده می کنید ما دو div مختلف درون این transition داریم: اولی، کلاس info و دومی، کلاس warning دارد. قبلاً هم توضیح داده بودم که درون transition ها فقط یک عنصر با یک شرط جا می گیرد و اگر بخواهیم چند عنصر را درون یک transition داشته باشیم باید شرط آن ها با هم یکی نباشد (در ادامه دوره، راه حل استفاده از transition برای چندین عنصر با یک شرط واحد را نیز توضیح می دهیم اما فعلاً بحث ما مربوط به این موضوع نیست) به همین دلیل شرط div دوم را برعکس شرط اول گذاشته ام.
البته برای زیبا تر شدن کدها می توانیم به جای دو v-if، از v-else نیز استفاده کنیم:
<transition :name="alertAnimation"> <div class="alert alert-info" v-if="show">This is some Info</div> <div class="alert alert-warning" v-else>This is some Warning</div> </transition>
شاید تصور کنید که با باز کردن مرورگر همه چیز حل می شود اما اینطور نیست. در حال حاضر دو کادر ما به هم تبدیل می شوند اما هیچ fade یا انیمیشن دیگری مشخص نیست و تبدیل شدن آن ها به صورت آنی انجام می شود. دلیل این مشکل چیست؟ اگر برای چنین شرایطی از یک عنصر دو بار استفاده کنیم (مثل کد بالا که دو div داریم) Vue نمی تواند بین آن ها تفاوت قائل شود. از نظر Vue هر دو div در کد بالا یکی هستند بنابراین فقط محتوای آن ها را با هم عوض می کند و طبیعتا انیمیشنی نمایش داده نمی شود. برای این که کلاس های انیمیشن به صورت صحیح روی عناصر اعمال شوند، باید خود عناصر تغییر کنند نه محتوایشان.
برای حل این مشکل باید برای هر کدام از این دیوها key (به معنی کلید) تعریف کنیم. این key شناسنامه این دیوها است و مشخص می کند که این دو با یکدیگر تفاوت دارند:
<transition :name="alertAnimation"> <div class="alert alert-info" v-if="show" key="info">This is some Info</div> <div class="alert alert-warning" v-else key="warning">This is some Warning</div> </transition>
اگر کدهای بالا را ذخیره کرده و به مرورگر بروید شاهد مشکل دیگری خواهید بود. مشکل جدید این است که کادر دوم، قبل از حذف شدن کادر اول به صفحه اضافه می شود و به همین دلیل شاهد یک جهش بین این دو کار هستیم. این جهش باعث می شود ظاهر برنامه بسیار زشت شود.
اگر این دو عنصر را position: absolute تعریف کرده بودیم هر دو عنصر روی یکدیگر قرار می گرفتند و دیگر شاهد این جهش نبودیم اما ما نمی خواهیم position کادرهای خود را تغییر دهیم. با این حساب راه حل چیست؟ فریم ورک Vue برای این مسئله راه حلی را در نظر گرفته است؛ ما باید mode یا حالت transition را تغییر دهیم. ما دو مقدار برای خصوصیت mode داریم:
- out-in: این گزینه به Vue می گوید بگذار ابتدا عنصر قبلی کاملا حذف شود و سپس به عنصر بعدی اجازه نمایش بده.
- in-out: این گزینه به Vue می گوید ابتدا عنصر جدید را نمایش بده و سپس عنصر قبلی را حذف کن.
برای کاری که ما می خواهیم انجام دهیم، out-in مشکل را حل می کند:
<transition :name="alertAnimation" mode="out-in"> <div class="alert alert-info" v-if="show" key="info">This is some Info</div> <div class="alert alert-warning" v-else key="warning">This is some Warning</div> </transition>
حالا اگر مرورگر را باز کنید (npm run dev در حال اجرا باشد) می بینید که کادر آخر با کلیک روی دکمه Show Alert بین info و warning جا به جا می شود.
تا این قسمت از کار از CSS برای ایجاد انیمیشن استفاده کرده ایم اما می خواهم بدانید که می توانیم با جاوا اسکریپت نیز این کارها را انجام بدهیم. در واقع کامپوننت <transition> که تا به حال با آن کار کرده ایم، دارای event هایی است که می توانیم به آن ها گوش کنیم. این event ها به شکل زیر هستند:
- در حالت اولیه پس از اضافه شدن عنصر به DOM رویدادی به نام before-enter ارسال (emit) می شود.
- پس از آن رویداد enter ارسال (emit) می شود که مسئول نمایش انیمیشن است.
- پس از آنکه اجرای انیمیشن تمام شد، رویداد after-enter ارسال (emit) می شود.
- اگر قبل از تمام شدن اجرای انیمیشن، شرط نمایش آن تغییر کند و انیمیشن کنسل شود، رویداد after-enter-cancelled ارسال می شود.
- در هنگام شروع عملیات حذف عنصر از DOM رویداد before-leave ارسال می شود.
- در هنگام اجرای انیمیشن حذف عنصر، رویداد leave ارسال می شود.
- پس از اتمام انیمیشن حذف، رویداد after-leave ارسال می شود.
- اگر انیمیشن حذف یا خروج به دلیلی کنسل شود، رویداد after-leave-cancelled اجرا خواهد شد.
به این رویدادها Transition JS Hook می گوییم، یعنی هوک هایی جاوا اسکریپتی که به transition مربوط هستند. در جلسه بعد به صورت عملی با آن ها کار خواهیم کرد.
- نصب و راهاندازی فریمورک 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
سلام میشه آموزش رو ادامه بدید؟
سلام خسته نباشید
این دوره درحال تکمیل هست؟
تاریخ حدودی اتمام دوره مشخص است یا خیر؟
سلام پس چرا ادامه ندادین آموزش خیلی عالی و عمیقی هست
سلام و وقت بخیر
لطفا در رابطه با ویژگی های جدید vue3 هم اموزش هایی قرار بدید متشکرم