Vue.js এ বিল্ট-ইন ট্রানজিশনস

Vue.js একটি শক্তিশালী এবং সহজ ট্রানজিশন সিস্টেম প্রদান করে, যা ডোম এলিমেন্টগুলোর ইন্টারঅ্যাকশনের সময় অ্যানিমেশন বা ট্রানজিশন ইফেক্টস যুক্ত করতে সাহায্য করে। আপনি যখন Vue.js এ কোনো এলিমেন্টকে ইনপুট বা রিমুভ করেন, তখন ট্রানজিশন ইফেক্টস ব্যবহার করে সহজেই অ্যানিমেশন যোগ করতে পারেন।

Vue.js এ বিল্ট-ইন ট্রানজিশনস সুবিধা প্রদান করে যা খুব সহজে ইফেক্ট অ্যাপ্লাই করতে সক্ষম। এই ট্রানজিশনগুলি সাধারণত ভিউ কম্পোনেন্টের ইনপুট, রিমুভ বা ভিউ আপডেট করার সময় ব্যবহার করা হয়।

১. ট্রানজিশন ট্যাগ

Vue.js এ একটি এলিমেন্ট বা কম্পোনেন্টে ট্রানজিশন অ্যাপ্লাই করতে হলে <transition> ট্যাগ ব্যবহার করতে হয়। আপনি <transition> ট্যাগের মধ্যে কোনো এলিমেন্ট বা কম্পোনেন্ট যোগ করবেন, এবং Vue.js এই এলিমেন্টের উপর ট্রানজিশন প্রক্রিয়া সম্পন্ন করবে।

সাধারণ উদাহরণ:

<template>
  <div>
    <button @click="isVisible = !isVisible">Toggle Visibility</button>
    <transition name="fade">
      <p v-if="isVisible">Hello, I am a fade-in text!</p>
    </transition>
  </div>
</template>

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

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 1s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>

এখানে:

• v-if="isVisible" দিয়ে প্যারাগ্রাফের দৃশ্যমানতা নিয়ন্ত্রণ করা হচ্ছে।
• <transition> ট্যাগের name="fade" এর মাধ্যমে fade-enter-active এবং fade-leave-active ক্লাসগুলির জন্য CSS ট্রানজিশন প্রোপার্টি অ্যাপ্লাই করা হচ্ছে।
• fade-enter এবং fade-leave-to ক্লাস ব্যবহার করা হয়েছে যাতে অ্যানিমেশন শুরু এবং শেষ হতে পারে।

২. ট্রানজিশন টাইপ

Vue.js অনেক ধরনের বিল্ট-ইন ট্রানজিশন সাপোর্ট করে, যেগুলো মূলত CSS এবং জাভাস্ক্রিপ্ট দিয়ে অ্যাপ্লাই করা হয়। এখানে কিছু সাধারণ ট্রানজিশন টাইপ রয়েছে:

২.১. অপাসিটি ট্রানজিশন

এটি খুব সাধারণ ট্রানজিশন, যেখানে এলিমেন্টের opacity পরিবর্তন করা হয়। এর মাধ্যমে এলিমেন্টটি আস্তে আস্তে দৃশ্যমান বা অদৃশ্য হয়।

<transition name="fade">
  <p v-if="show">This is a fading text!</p>
</transition>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 1s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>

২.২. স্লাইডিং ট্রানজিশন

এটি এলিমেন্টটি স্ক্রল ইফেক্টের মতো প্রদর্শিত বা অদৃশ্য হওয়ার জন্য ব্যবহৃত হয়, যেমন এলিমেন্টটি উপরের বা নীচের দিকে স্লাইড করবে।

<transition name="slide-fade">
  <div v-if="isVisible">Slide me in/out!</div>
</transition>

<style>
.slide-fade-enter-active, .slide-fade-leave-active {
  transition: transform 0.5s ease-in-out;
}
.slide-fade-enter, .slide-fade-leave-to {
  transform: translateX(100%);
}
</style>

এখানে, translateX(100%) ব্যবহার করা হয়েছে, যার মাধ্যমে এলিমেন্টটি স্ক্রিনের বাইরে চলে যায় এবং ফিরে আসে।

৩. জাভাস্ক্রিপ্ট ট্রানজিশন

Vue.js এ আপনি শুধুমাত্র CSS দিয়ে ট্রানজিশনই না, বরং জাভাস্ক্রিপ্ট দিয়েও ট্রানজিশন কাস্টমাইজ করতে পারেন। আপনি beforeEnter, enter, afterEnter ইত্যাদি হুক ব্যবহার করতে পারবেন।

জাভাস্ক্রিপ্ট ট্রানজিশনের উদাহরণ:

<template>
  <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
    <div v-if="show">Custom JavaScript Transition</div>
  </transition>
</template>

<script>
export default {
  data() {
    return {
      show: false
    }
  },
  methods: {
    beforeEnter(el) {
      el.style.opacity = 0;
      console.log('Before Enter');
    },
    enter(el, done) {
      el.offsetHeight; // trigger reflow
      el.style.transition = 'opacity 1s';
      el.style.opacity = 1;
      done(); // call done to indicate the transition is complete
    },
    afterEnter(el) {
      console.log('After Enter');
    }
  }
}
</script>

এখানে:

• beforeEnter: ট্রানজিশন শুরুর আগে কিছু কাজ করতে পারেন (যেমন, এলিমেন্টের opacity 0 করা)।
• enter: ট্রানজিশনের মূল কাজ, এখানে আপনি transition সি এস এস প্রোপার্টি সেট করেন এবং যখন ট্রানজিশন শেষ হয়, done() কল করে ট্রানজিশন শেষ জানান।
• afterEnter: ট্রানজিশন শেষে কিছু কাজ করতে পারেন (যেমন, লগ ইনফরমেশন প্রিন্ট করা)।

৪. কম্পোনেন্ট ট্রানজিশন

Vue.js এ কম্পোনেন্ট ট্রানজিশন ব্যবহার করার মাধ্যমে আপনি কম্পোনেন্টকে ইনপুট বা রিমুভ করার সময় অ্যানিমেশন যোগ করতে পারেন।

উদাহরণ:

<template>
  <transition name="component-fade">
    <MyComponent v-if="isVisible"/>
  </transition>
</template>

<script>
import MyComponent from './MyComponent.vue'

export default {
  components: {
    MyComponent
  },
  data() {
    return {
      isVisible: true
    }
  }
}
</script>

<style>
.component-fade-enter-active, .component-fade-leave-active {
  transition: opacity 1s;
}
.component-fade-enter, .component-fade-leave-to {
  opacity: 0;
}
</style>

এখানে, <transition> ট্যাগটি একটি Vue কম্পোনেন্ট (MyComponent) এর ইনপুট এবং রিমুভ সময় ট্রানজিশন চালু করে।

৫. ট্রানজিশন গ্রুপ (Transition Group)

Transition Group ব্যবহার করে আপনি একাধিক এলিমেন্ট বা কম্পোনেন্টে একসাথে ট্রানজিশন অ্যাপ্লাই করতে পারেন। এটি বিশেষভাবে তালিকা বা গ্রিড স্টাইলের আইটেমের জন্য উপকারী।

<template>
  <transition-group name="list-fade" tag="ul">
    <li v-for="item in items" :key="item.id">{{ item.text }}</li>
  </transition-group>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, text: 'Item 1' },
        { id: 2, text: 'Item 2' },
        { id: 3, text: 'Item 3' }
      ]
    }
  }
}
</script>

<style>
.list-fade-enter-active, .list-fade-leave-active {
  transition: opacity 1s;
}
.list-fade-enter, .list-fade-leave-to {
  opacity: 0;
}
</style>

এখানে, v-for ব্যবহার করে একটি তালিকা তৈরি করা হয়েছে এবং Transition Group এর মাধ্যমে একাধিক আইটেমের ট্রানজিশন অ্যাপ্লাই করা হয়েছে।

সারাংশ

• Vue.js এ ট্রানজিশন খুবই সহজ এবং শক্তিশালী। আপনি CSS বা জাভাস্ক্রিপ্ট ব্যবহার করে ট্রানজিশন ইফেক্টস অ্যাপ্লাই করতে পারেন।
• Transition Tag: সহজে ট্রানজিশন অ্যাপ্লাই করার জন্য Vue.js এর <transition> ট্যাগ ব্যবহার করা হয়।
• CSS ট্রানজিশন: ডেটা বা কম্পোনেন্ট ইনপুট/রিমুভ করার সময় সি এস এস এর মাধ্যমে অ্যানিমেশন যোগ করা যায়।
• JavaScript ট্রানজিশন: কাস্টম ট্রানজিশন হুক ব্যবহার করে ট্রানজিশন কাস্টমাইজ করা যায়।
• Transition Group: একাধিক আইটেমের জন্য ট্রানজিশন ব্যবহার করা যায়।

Vue.js এ বিল্ট-ইন ট্রানজিশন সিস্টেম ব্যবহার করে আপনি আপনার অ্যাপ্লিকেশনকে ইন্টারঅ্যাকটিভ

এবং দৃষ্টিনন্দন করতে পারবেন।