
در قسمت قبل نحوه اعمال انیمیشن ها در Vue را به صورت تئوری توضیح دادیم اما حالا وقت آن رسیده است که این مسئله را به صورت عملی تمرین کنیم. وارد فایل App.vue شده و name را برای transition تعریف کنید:
// بقیه کدها // <transition name="fade"> <div class="alert alert-info" v-if="show">This is some Info</div> </transition> // بقیه کدها //
نام دلخواه من fade است بنابراین آن را به name داده ام. با این کار Vue کلاس های fade-enter و fade-enter-active و fade-leave و fade-leave-active را بر اساس نیاز به عنصر ما می چسباند. بنابراین باید این کلاس ها را در قسمت style تعریف کنیم. توجه داشته باشید که اگر name را برای transition مشخص نمی کردیم، کلاس های پیش فرض v-enter و v-enter-active و v-leave و v-leave-active به عنصر ما اضافه می شد و به جای کلاس های Fade باید آن ها را در قسمت Style تعریف می کردیم.
من تمام کلاس ها را در همان ابتدا تعریف می کنم و سپس کدهایشان را می نویسم:
<style> .fade-enter { } .fade-enter-active { } .fade-leave { } .fade-leave-active { } </style>
حالا با کلاس fade-enter شروع می کنیم که فقط یک فریم اول انیمیشن ما خواهد بود و پس از آن حذف می شود:
.fade-enter { opacity: 0; }
همانطور که گفتم این کلاس تعریف کننده حالت اولیه است بنابراین می توان گفت opacity روی صفر باشد (هیچ چیز نمایش داده نشود) چرا که در شروع ظاهر شدن عنصر، چیزی برای نمایش نیست.
در مرحله بعد باید کلاس fade-enter-active را کدنویسی کنیم:
.fade-enter-active { transition: opacity 1s; }
من گفته ام که opacity را در طول 1 ثانیه، transition کنیم (این ها همه کدهای CSS هستند که باید با آن ها آشنا باشید). توجه کنید که ما در این قسمت opacity را روی 1 نمی گذاریم. چرا؟ به دلیل اینکه کلاس fade-enter (که در آن opacity صفر شد) بعد از یک فریم، حذف می شود. از طرفی opacity پیش فرض تمام عناصر روی 1 است بنابراین زمانی که opacity تعریف نشود، حتما 1 خواهد بود.
اگر opacity را در این مرحله روی 1 بگذارید، تمام انیمیشن از بین می رود. چرا؟ به دلیل اینکه کلاس fade-enter-active دقیقا لحظه ای قبل از حذف شدن fade-enter اضافه می شود بنابراین opacity در کلاس دوم (یک)، مقدار آن در کلاس دوم (صفر) را overwrite می کند و opacity همیشه 1 خواهد بود.
سپس برای fade-leave می توانیم opacity را روی 1 بگذاریم چرا که حالت اولیه عنصر قبل از خروج است (fade-enter حالت اولیه قبل از ورود بود) اما در این مرحله opacity روی یک هست بنابراین نیازی نیست که آن را مشخص کنیم. به هر حال من آن را به صورت کامنت برایتان قرار می دهم تا بدانید که این کار ممکن است:
.fade-leave { /* opacity: 1; */ }
در نهایت برای fade-leave-active می گوییم:
.fade-leave-active { transition: opacity 1s; opacity: 0; }
حالا می توانید کدها را در مرورگر تست کنید. کادر info به حالت نرم و با انیمیشن ظاهر خواهد شد.
استفاده از Animation
منظور من از animation خصوصیت animation در کدهای CSS است که حتما با آن آشنایی دارید. این خصوصیت جایگزین transition است. من می خواهم به جای fade شدن (نمایش به آرامی و از کم به زیاد) از slide (سُر خوردن عنصر به درون صفحه) استفاده کنم. ما می توانیم این کار را با خصوصیت transition نیز انجام بدهیم اما از animation استفاده می کنیم تا روش دیگری را نیز یاد گرفته باشیم.
من نام slide را انتخاب می کنم:
// بقیه کدها // <button class="btn btn-primary" @click="show = !show">Show Alert</button> <br /> <br /> <transition name="fade"> <div class="alert alert-info" v-if="show">This is some Info</div> </transition> <transition name="slide"> <div class="alert alert-info" v-if="show">This is some Info</div> </transition> // بقیه کدها //
همانطور که می بینید نیازی به حذف مقدار قبلی نیست. سپس مقادیر مورد نظر را نیز در style تعریف می کنم:
<style> .fade-enter { opacity: 0; } .fade-enter-active { transition: opacity 1s; } .fade-leave { /* opacity: 1; */ } .fade-leave-active { transition: opacity 1s; opacity: 0; } .slide-enter { } .slide-enter-active { } .slide-leave { } .slide-leave-active { } @keyframes slide-in { from { } to { } } </style>
همانطور که می بینید مقادیر fade را حذف نکرده ام (مشکلی ایجاد نمی کنند). همانطور که می دانید برای استفاده از animation ها باید keyframes را تعریف کنیم بنابراین من اولین keyframe خود را به نام slide-in تعریف کرده ام. بیایید ابتدا آن را کدنویسی کنیم:
// بقیه کدها // @keyframes slide-in { from { transform: translateY(20px); } to { transform: translateY(0); } } @keyframes slide-out { from { transform: translateY(0); } to { transform: translateY(20px); } } </style>
این دو keyframe های مورد نظر من هستند. شما می توانید این موارد را به سلیقه خودتان تغییر دهید. همچنین اگر بخواهیم در مورد animation ها توضیح بدهیم باید یک دوره جداگانه را برگزار کنیم بنابراین توضیحات اضافی نمی دهم (آشنایی با CSS از پیش نیاز های این دوره است).
در نهایت کلاس های slide خودم را نیز تعریف می کنم:
.slide-enter { /* transform: translateY(20px); */ }
از آنجایی که در keyframe های خودم، مقدار اولیه را تعیین کرده بودم (در قسمت from از slide-in) نیازی به تعریف کردن آن در این قسمت نیست اما به هر حال آن را به صورت کامنت شده برایتان گذاشته ام تا بدانید، استفاده از آن مشکلی را ایجاد نمی کند و فقط اضافه نویسی است.
.slide-enter-active { animation: slide-in 1s ease-out forwards; }
این کلاس نیز مسئول اجرای انیمیشن ما است بنابراین keyframe را به آن می دهم، مدت را 1 ثانیه و ease-out را نیز برایش تنظیم می کنم. نهایتا forwards را مشخص کرده ایم تا پس از پایان اجرای انیمیشن، عنصر ما به مکان اولیه برنگردد و سر جایش بماند. از آنجایی که از forwards استفاده کرده ایم نیازی به تعریف slide-leave (حالت اولیه برای خروج) نیست:
.slide-leave { }
و سپس انیمیشن خروج را نیز به شکل زیر مشخص می کنیم:
.slide-leave-active { animation: slide-out 1s ease-out forwards; }
حالا کدها را در مرورگر تست می کنیم و نتیجه زیر را مشاهده خواهیم کرد:
تنها مشکلی که من شخصا با این انیمیشن دارم این است که از بالا به پایین می رود و به صورت ناگهانی ناپدید می شود. خیلی بهتر بود که همانطور که به سمت پایین حرکت می کند به آرامی محو شود. در جلسه بعد این کار را به وسیله ترکیب animation و 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