Jassif Team Institution

Vue <TransitionGroup> উপাদান

<TransitionGroup> উপাদানটি Vue-এর সবচেয়ে শক্তিশালী অন্তর্নির্মিত উপাদানগুলির মধ্যে একটি। এটি ভি-ফর দিয়ে তৈরি অনেক উপাদানের জন্য অ্যানিমেশন প্রদান করে, বিশেষ করে যখন সেগুলি যোগ করা, সরানো বা পুনর্বিন্যাস করা হয়।

উদাহরণ

আপনার নিজস্ব Vue সার্ভার পান

অন্তর্নির্মিত <TransitionGroup> উপাদান ব্যবহার করে অ্যানিমেটেড <li> ট্যাগ ধারণকারী একটি <ol> ট্যাগ তৈরি করতে:

<TransitionGroup tag="ol">
  <li v-for="x in products" :key="x">
    {{ x }}
  </li>
</TransitionGroup>

নীচে আরো উদাহরণ দেখুন.

সংজ্ঞা এবং প্রয়োগ

একটি অন্তর্নির্মিত <TransitionGroup> উপাদানগুলি যখন এই উপাদানগুলি যোগ করা বা সরানো হয় তখন পৃথক অ্যানিমেশন প্রদান করতে v-for দিয়ে তৈরি উপাদানগুলির চারপাশে ব্যবহার করা হয়।

<TransitionGroup> এলিমেন্টের মধ্যে v-for দিয়ে তৈরি করা ট্যাগগুলিকে কী অ্যাট্রিবিউট দিয়ে স্বতন্ত্রভাবে সংজ্ঞায়িত করতে হবে।

যখন একটি অ্যারের উপর ভিত্তি করে একটি <TransitionGroup> উপাদানের মধ্যে v-for দিয়ে ট্যাগ তৈরি করা হয়, তখন অ্যারে থেকে উপাদান যোগ করা বা সরানো হলে এই ট্যাগগুলি স্বয়ংক্রিয়ভাবে অ্যানিমেটেড হয়ে যায়।

প্রপস

একটি অন্তর্নির্মিত <TransitionGroup> উপাদান একটি অন্তর্নির্মিত <Transition> উপাদানের মতো একই প্রপসের সাথে ব্যবহার করা যেতে পারে, তবে অতিরিক্ত নাম এবং মুভক্লাস প্রপস গ্রহণ করবে:

মূল উদাহরণ

উদাহরণ 1

ডাইস যোগ করা বা অপসারণ করা যেতে পারে, যোগ করা পাশা <TransitionGroup> ব্যবহার করে অ্যানিমেটেড করা হয়।

<template>
  <h3>The <TransitionGroup> Component</h3>
  <p>New products are given animations using the <TransitionGroup> component.</p>
  <button @click="addDie">Roll</button>
  <button @click="removeDie">Remove random</button><br>
  <TransitionGroup>
    <div v-for="x in dice" :key="x" class="diceDiv" :style="{ backgroundColor: 'hsl('+x*40+',85%,85%)' }">
      {{ x }}
    </div>
  </TransitionGroup>
</template>

উদাহরণ 2

ডাইস যোগ করা বা অপসারণ করা যেতে পারে, যোগ করা এবং অপসারণ করা উভয় ডাইস <TransitionGroup> ব্যবহার করে অ্যানিমেটেড করা হয়।

<template>
  <h3>The <TransitionGroup> Component</h3>
  <p>When an item is removed inside the <TransitionGroup> component, other items are animated as they fall into their new positions.</p>
  <button @click="addDie">Roll</button>
  <button @click="removeDie">Remove random</button><br>
  <TransitionGroup>
    <div v-for="x in dice" :key="x" class="diceDiv" :style="{ backgroundColor: 'hsl('+x*40+',85%,85%)' }">
      {{ x }}
    </div>
  </TransitionGroup>
</template>

উদাহরণ 4

মুভ ক্লাসের নাম পরিবর্তন করা হয়েছে মুভক্লাস প্রপ ব্যবহার করে।

<template>
  <h3>The <TransitionGroup> Component</h3>
  <p>When an item is removed inside the <TransitionGroup> component, other items are animated as they fall into their new positions.</p>
  <button @click="addDie">Roll</button>
  <button @click="removeDie">Remove random</button><br>
  <TransitionGroup moveClass="good-slide">
    <div 
    v-for="x in dice" 
    :key="x" 
    class="diceDiv" 
    :style="{ backgroundColor: 'hsl('+x*40+',85%,85%)' }"
    >
      {{ x }}
    </div>
  </TransitionGroup>
</template>

Vue <TransitionGroup> কম্পোনেন্ট টিউটোরিয়াল

Vue-তে <TransitionGroup> উপাদান সম্পর্কে আপনার বোঝার পরীক্ষা করার জন্য এই টিউটোরিয়ালটি চেষ্টা করুন।

এটা কিভাবে কাজ করে

কিভাবে <TransitionGroup> উপাদান কাজ করে:

সর্বোত্তম অনুশীলন

<TransitionGroup> উপাদান ব্যবহার করার সময় এই নির্দেশিকাগুলি অনুসরণ করুন:

সম্পর্কিত পাতা

নীচের টিউটোরিয়ালগুলি <TransitionGroup> উপাদান সম্পর্কে আরও জ্ঞান প্রদান করবে: