Transitionsها در Vue.js

Transitionsها در Vue.js

حرکات و انیمیشن ها یک راه بسیار عالی برای دادن یک تجربه کاربری خوب و همچنین امروزی به نظر رسیدن وبسایت ها است. خوشبختانه پیاده سازی انیمیشن ها در Vue.js برای برنامه نویسان بسیار ساده است.

Vue.js راه های زیادی جهت پیاده سازی انیمیشن برای المان های HTML در زمانی که آنها ایجاد شده و یا به روز رسانی می شوند، پیشنهاد می دهد. تکه کد زیر، مثال ساده ای از شیوه استفاده <transition> را نشان می دهد.

<transition name="nameOfTransition">
    <div></div>
</transition>

اکنون با مثالی کامل این قابلیت Vue.js را بررسی می کنیم:

<div id="app">
    <h3>
        Transition example
    </h3>
    <div id="demo">
        <button @click="show = !show">
            Click me!
        </button>
        <p>
            When we click the button the following fades :
        </p>
        <transition name="fade">
            <p v-if="show">I am fading!</p>
        </transition>
    </div>
</div>
<style>
    .fade-enter-active, .fade-leave-active {
        transition: opacity .5s;
    }
    .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
        opacity: 0;
    }
</style>

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

در بخش <style> تعدادی کلاس تعریف شده است که به شرح آنها می پردازیم:

(نام این کلاس ها توسط Vue.js رزرو هستند و برای transition ها استفاده می شوند.)

  • V-enter: این مرحله آغازین بوده و هنوز هیچ المانی آپدیت نشده است.
  • V-enter-active: این مرحله زمانی اتفاق می افتد که متغیر show تغییر کرده و انیمیشن در حال اجرا شدن است. به عبارت دیگر انیمیشن منحنی زمانی خود را شروع کرده است.
  • V-leave: دقیقا قبل از زمانی است که انیمیشن از منحنی زمانی خود خارج شده و مقدار show  به مقدار اولیه خود برگردد.
  • V-leave-active: این مرحله زمانی است که انیمیشن در حال خارج شدن از منحنی زمانی بوده و پس از گرفتن مقدار اولیه show، این کلاس هم غیرفعال می شود.

در پایان مثال گفته شده در بالا را به صورت کامل قرار می دهیم:

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

    <style>
        .fade-enter-active, .fade-leave-active {
            transition: opacity .5s;
        }
        .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
            opacity: 0;
        }
    </style>
</head>
<body>
<div id="app">
    <h3>
        Transition example
    </h3>
    <div id="demo">
        <button @click="show = !show">
            Click me!
        </button>
        <p>
            When we click the button the following fades :
        </p>
        <transition name="fade">
            <p v-if="show">I am fading!</p>
        </transition>
    </div>
</div>

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

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            show: true
        },
    });
</script>
</body>
</html>
دوره در حال تکمیل است ... rocket
کاربر میهمان

دوست گرامی شما به عنوان کاربر میهمان در سایت سکان آکادمی حضور دارید لطفاً برای ارسال دیدگاه ابتدا وارد حساب خود شوید