استفاده از کلاس‌های CSS مختلف

Use Different CSS Classes

در قسمت قبل با نحوه اضافه کردن انیمیشن به 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 را انتخاب نماییم، انیمیشن نیز تغییر می کند.