شروع کار با Transitionهای کامپوننت در Vue

وقتی که برنامه‌ای می‌سازیم، هدف ما این است که آن برنامه خوب به چشم بیاید. ما می‌خواهیم که کاربرانمان در هنگام کار با آن‌ها، تجربه روانی داشته باشند، و به جای این که بین صفحات به صورت ناگهانی منتقل شوند، جریان داشتن برنامه‌مان از یک نقطه به یک نقطه دیگر را حس کنند.

اگر بدون استفاده از Transitionها بین کامپوننت‌ها جابه‌جا شویم، هر زمان که یک کامپوننت جدید فراخوانی می‌شود، یک تغییر تند و تیز را خواهیم دید. این اتفاق ایده‌آل نیست و می‌تواند به تجربه‌ای ضعیف برای کاربرانمان ختم شود.

در این آموزش، به نحوه پیشرفت جریان برنامه با استفاده از Transitionهای کامپوننت در Vue نگاهی خواهیم داشت.

جدول محتویات:

1. پیش‌نیاز‌ها
2. برنامه خود را راه‌اندازی کنید
3. رندر کردن کامپوننت‌های خود
4. تعریف Transitionها بر روی Data Change
5. تعریف Transitionها بر روی Component Change
6. اجرای برنامه
7. مشاهده یک دمو
8. نتیجه گیری

پیش‌نیاز‌ها:

1. Vue CLI 3 برای نصب Vue
2. دانش در زمینه JavaScript
3. دانش در زمینه Vue.js

برنامه خود را راه‌اندازی کنید

برای شروع، یک برنامه Vue جدید می‌سازیم. این دستور را اجرا کنید:

$ vue create component-transitions
$ cd component-transitions

پس از این که برنامه خود را ساختیم، باید یک کامپوننت که برای Transitionها استفاده خواهیم کرد را تعریف کنیم.

بروزرسانی کامپوننت برنامه: وقتی که یک برنامه Vue جدید می‌سازیم، CLI فایلی به نام App.vue در شاخه ./src می‌سازد. آن فایل را باز کنید و بخش style را به این صورت بروزرسانی کنید:

[...]
<style>
    [...] 
    h3 {
        margin: 40px 0 0;
    }
    ul {
        list-style-type: none;
        padding: 0;
    }
    li {
        display: inline-block;
        margin: 0 10px;
    }
    a {
        color: #42b983;
    }
</style>

ما styleهای global که می‌خواهیم در میان کامپوننت‌های خود به اشتراک بگذاریم را ساختیم. به این صورت، نیازی نیست که برای هر کامپوننت، استایل‌بندی‌ها را اضافه کنیم.

بروزرسانی کاپوننت HelloWorld: برنامه Vueما، فایل دیگری به نام HelloWorld.vue در شاخه ./src/components نیز دارد. این فایل را باز کنید و به این صورت آن را بروزرسانی کنید:

<template>
    <div class="hello">
        <h1>{{ msg }}</h1>
    </div>
</template>

<script>
    export default {
        name: 'HelloWorld',
        props: {
            msg: String
        }
    }
</script>

ساخت کامپوننت About: ما می‌خواهیم کامپوننت جدیدی به نام About.vue در شاخه ./src/components بسازیم. این فایل را باز کنید و این کد را به آن اضافه کنید:

<template>
    <div>
        <h1>{{ msg }}</h1>
    </div>
</template>

<script>
    export default {
        name: 'About',
        props: {
            msg: String
        }
    }
</script>

یک کامپوننت دیگر نیز بسازید: حال کامپوننت دیگری به نام Extra.vue در شاخه .src/components خواهیم ساخت. این فایل را باز کنید و این محتویات را به آن اضافه کنید:

<template>
    <div>
        <h1>{{ intro }}</h1>
    </div>
</template>

<script>
    export default {
        name: 'Extra',
        props: {
            msg: String
        },
        data(){
            return {
                intro : "Extra"
            }
        },
        watch: {
            msg : {
                immediate: true, 
                handler(val, oldval) {
                    //
                }
            }
        }
    }
</script>

برای کامپوننت Extra، یک متد watch برای ردگیری بروزرسانی‌های اعمال شده به ویژگی msg اضافه کرده‌ایم. وقتی که ویژگی پیام بروزرسانی می‌شود، می‌خواهیم ویژگی intro را نیز بروزرسانی کنیم.

ما آن را به این صورت تعریف کردیم، تا بتوانیم از Transitionها بر روی کامپوننت استفاده کنیم.

رندر کردن کامپوننت‌ها

Vue روش‌های مختلفی برای اعمال افکت‌های Transition، زمانی که آیتم‌های درون یک کامپوننت بروزرسانی شده‌اند یا خود کامپوننت‌ها تغییر کرده‌اند، فراهم کرده است. این محدوده، از اعمال کلاس‌های CSS برای اعمال Transition و انیمیشن، تا استفاده از کتابخانه‌های JavaScript برای این کار جریان دارد.

اولین مجموعه Transitionهایی که استفاده خواهیم کرد، بر روی تغییر کامپوننت‌ها خواهد بود. ما از رندر کردن شرطی برای نمایش کامپوننت‌های که ساختیم استفاده خواهیم کرد و در هنگام رندر شدن آن‌ها، Transitionها را اعمال خواهیم کرد.

کامپوننت‌ها را وارد کنید: باید کامپوننت‌هایی که در کامپوننت App.vue ساختیم را وارد کنیم. فایل مربوطه را باز کنید و آن را به این صورت بروزرسانی کنید:

[...]
<script>
    import HelloWorld from './components/HelloWorld.vue'
    import About from './components/About.vue'
    import Extra from './components/Extra.vue'

    export default {
        name: 'app',
        components: {
            HelloWorld, About, Extra
        }
    }
</script>

از کامپوننت‌ها استفاده کنید: حال که کامپوننت‌ها را وارد کردیم، بیایید از آن‌ها در کامپوننت App استفاده کنیم. فایل App.vue را به این صورت بروز رسانی کنید:

<template>
    <div id="app">
        <img src="./assets/logo.png">
        <HelloWorld msg="Welcome to your Vue.js application"/>
        <Extra :msg="extra"/>
        <About msg="This is the About page"/>
        <button @click="changeExtra">Update Extra</button>
    </div>
</template>

ما تابعی به نام changeExra تعریف کردیم، تا منتظر کلیک بر روی دکمه‌ها باشد، و همچنین ویژگی msg را به صفت extra متصل کردیم. حال بیایید صفت extra و متد changeExtra را تعریف کنیم.

فایل مربوطه را به این صورت بروزرسانی کنید:

[...]
export default {
    name: 'app',
    components: {
        HelloWorld, About, Extra
    },
    data(){
        return {
            extra : "Extra"
        }
    },
    methods : {
        changeExtra(){
            this.extra = "This is extra"
        }
    },
}
[...]

لینک‌هایی برای جابه‌جایی میان کامپوننت‌ها تعریف کنید: حال می‌خواهیم در هر زمان، یک کامپوننت را نمایش دهیم. برای انجام این کار، مجموعه‌ای ساده از لینک‌ها خواهیم داشت که ما را قادر می‌سازند تا تعیین کنیم که کدام کامپوننت در زمانی خاص، استفاده شود.

فایل App.vue را باز کرده، و به این صورت بروزرسانی کنید:

<template>
    <div id="app">
        [...]
        <div>
            <ul>
                <li @click="showHome">Home</li>
                <li @click="showAbout">About</li>
                <li @click="showExtra">Extra</li>
            </ul>
        </div>
    </div>
</template>

سپس متدهایی که در بالا استفاده کردیم را اضافه کنید:

[...]
methods : {
    [...]
    showHome(){
        this.displayHome = true
        this.displayAbout = false
        this.displayExtra = false
    },
    showAbout(){
        this.displayHome = false
        this.displayAbout = true
        this.displayExtra = false
    },
    showExtra(){
        this.displayHome = false
        this.displayAbout = false
        this.displayExtra = true
    }
},
[...]

در آخر، ویژگی‌های displayHome، displayAbout و displayExtra را تعریف می‌کنیم.

[...]
data(){
    return {
        extra : "Extra",
        displayHome : true,
        displayAbout : false,
        displayExtra : false
    }
},
[...]

مقدار ویژگی displayHome را برابر با true قرار می‌دهیم، تا هر زمان که برنامه خود را بارگذاری می‌کنیم، به عنوان اولین کامپوننت نمایش داده شود. باقی موارد برابر با false هستند، تا نمایش داده نشوند.

رندر کردن شرطی کامپوننت‌ها: حال که لینک‌هایی برای نمایش کامپوننت‌های خود تعریف کرده‌ایم، بیایید آن‌ها را بر اساس شرایطی خاص، رندر کنیم. باز هم فایل App.vue را به این صورت بروزرسانی کنید:

<template>
    <div id="app">
        <img src="./assets/logo.png">
        <HelloWorld msg="Welcome to your Vue.js application" v-if="displayHome"/>
        <About msg="This is the About page" v-if="displayAbout"/>
        <div v-if="displayExtra">
            <Extra :msg="extra"/>
            <button @click="changeExtra">Update Extra</button>
        </div>
        [...]
    </div>
</template>

پس با موفقیت تمام کامپوننت‌های خود را رندر کرده‌ایم، و حال می‌توانیم Transitionهای خود را اضافه کنیم.

تعریف Transitionها بر روی Data Change

در اینجا، کامپوننت Extra را تغییر خواهیم داد. ما می‌خواهیم وقتی که داده‌های داخل کامپوننت را بروزرسانی می‌کنیم، یک افکت Transition ساده را اضافه کنیم. فایل Extra.vue در شاخه ./src/components را باز کرده، و آن را به این صورت بروزرسانی کنید:

<template>
    <div>
        <transition name="fade">
            <h1 v-if="!msg">{{ intro }}</h1>
        </transition>
        <transition name="fade">
            <h1 v-if="msg">{{ msg }}</h1>
        </transition>
    </div>
</template>
[...]
<style scoped>
   .fade-enter-active{
        transition: opacity 1.5s;
    }
    .fade-leave-active {
        opacity: 0;
    }
    .fade-enter, .fade-leave-to {
        opacity: 0;
    }
</style>

این یک کامپوننت ساده است. وقتی که بر روی دکمه Update Extra کلیک می‌کنیم، متوجه یک افکت slide در حال محو شدن می‌شویم. این Transition کاملا در دید است، پس کاربران باید متوجه آن شوند.

ما می‌توانیم این کار را با جمع‌بندی عناصر خود در یک عنصر Vue transition و سپس تعریف افکتی که می‌خواهیم عنصر Transition استفاده کند، انجام دهیم. در این مورد، ما از ویژگی «کدورت» برای ظاهر و غیب کردن کامپوننت استفاده کردیم.

Vue ویژگی‌های زیادی برای مراحل مختلف هر حلقه Transition دارد که می‌توانیم استفاده کرده، و تعریف کنیم که می‌خواهیم Transition ما چگونه باشد.

تعریف Transitionها بر روی Component Change

Transitionها را بر روی کامپوننت HelloWorld تعریف کنید: حال، به کامپوننت App بروید که در آن راه‌های دیگری برای پیاده‌سازی Transitionها خواهیم دید. بیایید Transition را بر روی کامپوننت HelloWorld تعریف کنیم. فایل App.vue را باز کنید و آن را به این صورت بروزرسانی کنید:

<transition name="welcome">
    <HelloWorld msg="Welcome to your Vue.js application" v-if="displayHome"/>
</transition>

Transition ما، «Welcome» نام خواهد داشت. حال، کلاس‌های Transition را به افکت مورد پسند خود اضافه کنید:

<style scoped>
    /* Welcome Styles */
    .welcome-enter {
        transform: translateX(10px);
        opacity: 0;
    }
    .welcome-enter-active {
        transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
    }
    .welcome-leave-active, .welcome-leave-to {
        opacity: 0;
    }
</style>

حال، هر زمان که برروی لینک hom کلیک کنیم، کمی لرزش خواهیم دید.

Transitionها را بر روی کامپوننت About تعریف کنید: حال قدم دیگری مشابه با مرحله کامپوننت HelloWorld خواهیم برداشت. فایل مربوطه را باز کنید و این کد را به آن اضافه کنید:

[...]
<transition name="about">
    <About msg="This is the About page" v-if="displayAbout"/>
</transition>
[...]

سپس افکت Transition را اضافه کنید:

<style scoped>
    [...]
    /* About Styles */
    .about-enter {
        width: 30%;
        opacity: 0;
    }
    .about-enter-active {
        transition: all 2s ease-in-out;
    }
    .about-leave-active, .about-leave-to {
        opacity: 0;
    }
    .about-enter-to {
        width:100%;
        opacity: 1;
        margin-left: auto;
    }
</style>

Transitionها را بر روی کامپوننت Extra تعریف کنید: در آخر، بیایید یک Transition نیز برای وارد شدن به، و خارج شدن از کامپوننت Extra تعریف کنیم:

[...]
<transition name="extra">
    <div v-if="displayExtra">
        <Extra :msg="extra"/>
        <button @click="changeExtra">Update Extra</button>
    </div>
</transition>
[...]

سپس استایل‌های مربوط به Transition را اضافه کنید:

<style scoped>
    [...]
    /* Extra Styes */
    .extra-enter {
        transform: translateX(-200px);
        opacity: 0;
    }
    .extra-enter-to {
        transform: translateX(0px);
    }
    .extra-enter-active {
        transition: all 1s cubic-bezier(1.0, 0.5, 0.8, 1.0);
    }
    .extra-leave-active, .extra-leave-to {
        opacity: 0;
    }
</style>

و در اینجا، کار ما با Transition کامپوننت‌ها به پایان می‌رسد.

اجرای برنامه

حال که کار ما در تعریف Transitionها برای کامپوننت‌های مختلف به پایان رسیده است، بیایید برنامه را اجرا کنیم و ببینیم که چه ظاهری دارد.

در ترمینال خود، این دستور را اجرا کنید:

$ npm run serve

سپس در URLای که نمایان می‌شود، برنامه خود را مشاهده کنید.

مشاهده یک دمو:

لینک ویرایش کد بر روی CodeSandbox:

https://codesandbox.io/s/p59x53pqz7?from-embed

نتیجه گیری:

در این آموزش، نگاهی به Transitionهای کامپوننت Vue داشتیم. دیدیم که اضافه کردن Transition به برنامه‌های خود، چقدر ساده است. حال Transitionهای دیگر را نیز بر روی کامپوننت‌های خود اضافه کنید و بینید که با چه چیزی مواجه می‌شوید.

منبع