استفاده عملی از Transition و Animation

در قسمت قبل نحوه اعمال انیمیشن ها در 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 انجام خواهیم داد.