چرا سکان آکادمی؟
انیمیشن ها در Vue.js

انیمیشن ها در Vue.js

انیمیشن ها هم همانند آنچه درباره حرکات (transitions) در Vue.js توضیح داده شد، پیاده سازی و استفاده می شود. انیمیشن در Vue.js به کلاس هایی نیاز دارد که نحوه اتفاق افتادن آن را شرح دهند.

نحوه پیاده سازی یک انیمیشن در Vue.js:        

با مشاهده مثال زیر متوجه می شویم که انیمیشن ها به چه صورت در vue.js کار می کنند.

*توجه: این یک مثال کامل است که می توانید با کپی کردن این قسمت از کد، به راحتی این مثال را بر روی سیستم خود اجرا کنید.

<html lang="en">
<head>
    <title>VueJs Animations - Sokan Academy</title>

    <style>
        @keyframes bounce-in {
            0% {
                transform: scale(0);
            }
            50% {
                transform: scale(1.5);
            }
            100% {
                transform: scale(1);
            }
        }

        .bounce-enter-active {
            animation: bounce-in .5s;
        }

        .bounce-leave-active {
            animation: bounce-in .5s reverse;
        }
    </style>
</head>
<body>
<div id="app">
    <h3>
        Example of Vue.js animations
    </h3>

    <div id="example">
        <button @click="show = !show">Animate!</button>
        <transition name="bounce">
            <p v-if="show">
                Animations work in the same way as transitions, the only contrast being that v-enter is not removed
                immediately after the element is inserted, but on an animationend event.
            </p>
        </transition>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script>
    const vm = new Vue({
        el: '#example',
        data: {
            show: true
        }
    });
</script>
</body>
</html>
شکل 1 - خروجی اجرای مثال مربوط به animation در vue.js
شکل 2- خروجی اجرای مثال مربوط به animation در vue.js

در این مثال یک دکمه در نظر گرفته شده است که مقدار show را بین مقادیر true و false جابه جا می کند. یک تگ <p> وجود دارد که با تغییر مقدار show، مقیاس این پاراگراف ابتدا بزرگ شده و سپس ناپدید می شود. محصور شدن تگ <p> توسط <transition> به این معناست که این عمل پیدا و پنهان شدن قرار است به صورت انیمیشنی و تنها برای این تگ <p> انجام شود.

در این مثال (همانند مثالی که در قسمت قبلی بیان شد)، از همان روشی که برای transition ها به کار بردیم، استفاده شده است. انیمیشن ها و حرکت ها به 4 کلاس اختصاصی برای اجرا نیاز دارند (این کلاس ها در قسمت قبلی به طور کامل توضیح داده شد):

  • Enter
  • Enter-active
  • Leave
  • Leave-active

برای اجرای یک animation یا یک transition در Vue.js از این کلاس ها باید استفاده کرد.

در مثال بالا ما به تگ <transition> یک اسم خاص داده ایم تا برای استفاده از کلاس های گفته شده، بتوان از این اسم کمک گرفت.

برای اجرای انیمیشن نیازمند یک keyframes@ هستیم تا روند اجرای انیمیشن را با این keyframes@ شرح دهیم. همانند انیمیشن ها که در CSS یادگرفته ایم و همچنین کاری که می خواهیم انجام دهیم، keyframes@ را می نویسیم.

سپس باید از کلاس هایی که مخصوص Vue.js هستند استفاده کنیم تا روند اجرای انیمیشن با کلیک بر روی دکمه را برای Vue.js توضیح دهیم.

.bounce-enter-active {
    animation: bounce-in .5s;
}

این کلاس لحظه ی ابتدایی و هنگام اولین کلیک روی دکمه را شرح می دهد که کدام انیمیشن باید با اولین تغییر در متغیر show انجام شود. از اسم مربوط به transition در Vue.js برای استفاده از کلاس و دقیقا قبل از enter-active استفاده شده است. همچنین برای اجرای keyframes@ هم از اسمی که مربوط به keyframes@ بوده و زمان اجرای آن استفاده شده است.

.bounce-leave-active {
    animation: bounce-in .5s reverse;
}

این کلاس لحظه دوم و هنگام دومین کلیک روی دکمه را توضیح می دهد که کدام انیمیشن باید برای دومین تغییر در متغیر show و زمانی که show به مقدار ابتدایی خودش بر می گردد، اجرا شود. برای این کلاس هم از اسم مربوط به transition و دقیقا قبل از leave-active استفاده است.

نکات تکمیلی:

Vue.js منتظر می ماند تا روند اجرای transition یا animation تمام شود. البته می توانیم برای این روند یک تاخیر (delay) هم تعریف کنیم. همانند مثال زیر:

<transition :duration = "1000"></transition>
<transition :duration = "{ enter: 500, leave: 800 }">...</transition>

با اضافه کردن یک property با نام duration به این تگ، می توان این کار را ممکن کرد.

با تمرین و دیدن مثال های بیشتری درباره انیمیشن ها در Vue.js می توانید به راحتی به این موارد تسلط پیدا کرده و در این حوزه حرفه ای شوید.

 

 

منبع: 

 https://www.mygreatlearning.com/blog/26176-2

دوره در حال تکمیل است ... rocket