آشنایی با انیمیشن‌ها در Vue

Animations in Vue

به فصل جدید خوش آمدید! در این فصل در رابطه با انیمیشن ها در برنامه های Vue صحبت خواهیم کرد. انیمیشن ها فراتر از زیبایی ظاهری برنامه شما هستند، آن ها UI و UX را به مراتب ارتقاء می دهند و تجربه دلنشینی را برای کاربر رقم می زنند. بگذارید برایتان مثالی بزنم.

تا این قسمت، هر جا خواستیم که عنصری را به صورت مشروط به DOM اضافه یا از آن حذف کنیم از دستور v-if یا v-show استفاده کرده ایم اما این دو دستور بدون هیچ انیمیشنی کار می کنند، بنابراین فرآیند حذف یا اضافه شدن عنصر به صورت آنی اتفاق می افتد. برای شروع این قسمت از همان پروژه آماده فصل قبل استفاده کنید. یعنی یک پروژه simple-webpack که دارای فایل main.js و App.vue است. محتویات فایل app.vue مثل همیشه در اول کار چیز خاصی نیست:

<template>
    <div class="container">
        <div class="row">
            <div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
                <h1>Animations</h1>

            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {

            }
        }
    }
</script>

<style>

</style>

من می خواهم دکمه ای تعریف کنم که پس از کلیک روی آن یک div ساده (از نوع کلاس info در بوت استرپ) برای ما نمایش داده شود. ابتدا این مقادیر را در app.vue تعریف می کنم:

<template>
  <div class="container">
    <div class="row">
      <div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
        <h1>Animations</h1>
        <hr />
        <button class="btn btn-primary">Show Alert</button>
        <br />
        <br />
        <div class="alert alert-info">This is some Info</div>
      </div>
    </div>
  </div>
</template>

دو تگ br را برای ایجاد فاصله بین دکمه و کادر info گذاشته ام. در مرحله بعد باید کاری کنیم که نمایش این alert به صورت مشروط (وابسته به شرطی خاص) باشد بنابراین به قسمت data در همین فایل رفته و می گوییم:

<script>
export default {
  data() {
    return {
        show: false
    };
  }
};
</script>

سپس می توانیم با استفاده از این شرط، مشخص کنیم که div نمایش داده بشود یا خیر:

<template>
  <div class="container">
    <div class="row">
      <div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
        <h1>Animations</h1>
        <hr />
        <button class="btn btn-primary" @click="show = !show">Show Alert</button>
        <br />
        <br />
        <div class="alert alert-info" v-if="show">This is some Info</div>
      </div>
    </div>
  </div>
</template>

من در کد بالا با استفاده از v-if مقدار show را بررسی می کنم تا هر زمان که به true تغییر کرد، div نمایش داده شود و هر زمان که به false برگشت div نمایش داده نشود. همچنین با استفاده از click@ مشخص کرده ام که با کلیک کردن روی این دکمه، خصوصیت show مقدار برعکس خود را می گیرد (مثلا اگر true بود false و اگر False بود true می شود). در حال حاضر اگر npm run dev در حال اجرا باشد، مشکلی نخواهیم داشت و برنامه در مرورگر قابل مشاهده است اما همانطور که می دانیم، دارای هیچ انیمیشنی نیست بنابراین با کلیک روی دکمه Show Alert کادر info به صورت آنی ظاهر یا حذف می شود.

راه حل فریم ورک Vue برای این مشکل، معرفی کامپوننت خاصی به نام transition است. اگر عناصر خود را درون این کامپوننت قرار دهید می توانیم به آن ها انیمیشن های خودمان را اضافه کنیم. نکته مهم اینجاست که transition فقط توانایی اضافه کردن انیمیشن به یک عنصر را دارد بنابراین نمی توانید یک لیست کامل را با آن animate (اضافه کردن انیمیشن) کنید. به طور مثال اگر دو div مختلف را درون transition قرار بدهیم، در قسمت کنسول مرورگر خطا دریافت خواهیم کرد. بنابراین نکته مهم اینجاست که فقط یک عنصر را درون transition خواهیم داشت:

<template>
  <div class="container">
    <div class="row">
      <div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
        <h1>Animations</h1>
        <hr />
        <button class="btn btn-primary" @click="show = !show">Show Alert</button>
        <br />
        <br />
        <transition>
          <div class="alert alert-info" v-if="show">This is some Info</div>
        </transition>
      </div>
    </div>
  </div>
</template>

با انجام این کار هنوز هم انیمیشن نخواهیم داشت. بنابراین سوال اینجاست که چطور انیمیشن را به آن اضافه کنیم؟

یکی از شایع ترین راه ها استفاده از کلاس های transition در CSS است که حتما با آن ها آشنا هستید منتهی کار کردن با آن ها در Vue کمی متفاوت است. ما باید یک انیمیشن را تعریف کنیم (مثلا نامش را animation می گذاریم. سپس Vue کلاسی به نام زیر را به عنصر ما متصل می کند که فقط یک فریم از انیمیشن را خواهد داشت:

animation-enter

یعنی نام انیمیشن ما + کلمه enter

این کلاس حالت اولیه عنصر را در شروع انیمیشن مشخص می کند. مثلا اگر بخواهیم عنصری را به آرامی نمایش بدهیم حالت اول آن چیست؟ حالت اول آن غیر قابل نمایش بودن (opacity روی صفر) است چرا که ما می خواهیم عنصر را نمایش دهیم اما در حالت اولیه هنوز چیزی برای دیدن نیست (اگر چیزی برای دیدن باشد یعنی عنصر نمایش داده شده است و انیمیشن تمام شده است).

پس از اجرای این تک فریم، کلاس دیگری به شکل زیر به عنصر ما متصل می شود:

animation-enter-active

یعنی نام انیمیشن ما + کلمه enter + کلمه active

این کلاس، مسئول اجرای بقیه انیمیشن ما است (vue به کد های CSS شما نگاه می کند و می فهمد که طول مدت انیمیشن چقدر است). حالا اگر بخواهیم برعکس این عملیات را انجام دهیم، چطور؟ ابتدا انیمیشن خودمان را تعریف می کنیم (مثلا من نامش را exit می گذارم) سپس به اندازه یک فریم (frame)، کلاس exit-leave اجرا شده و برای بقیه مدت انیمیشن کلاس exit-leave-active اجرا خواهد شد. البته توجه داشته باشید که می توانید از مقدار v-enter نیز استفاده کنید که همان نام پیش فرض است و حتما لازم نیست برای انیمیشن های خود نامی را در نظر بگیرید. در قسمت بعد این کار را به صورت عملی انجام خواهیم داد. خلاصه موارد توضیح داده شده را می توانید در تصویر زیر مشاهده کنید: