Skip to content

TransitionGroup

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

Differences from <Transition>

<TransitionGroup> একই প্রপস, CSS ট্রানজিশন ক্লাস, এবং JavaScript হুক শ্রোতাদেরকে <Transition> হিসেবে সমর্থন করে, নিম্নলিখিত পার্থক্য সহ:

  • ডিফল্টরূপে, এটি একটি মোড়ক কম্পোনেন্ট রেন্ডার করে না। কিন্তু আপনি tag প্রপের সাথে রেন্ডার করার জন্য একটি কম্পোনেন্ট নির্দিষ্ট করতে পারেন।

  • Transition modes উপলভ্য নয়, কারণ আমরা আর পারস্পরিক একচেটিয়া কম্পোনেন্টগুলির মধ্যে পরিবর্তন করছি না।

  • ভিতরের কম্পোনেন্টগুলির একটি অনন্য key বৈশিষ্ট্য থাকতে সর্বদা প্রয়োজন

  • সিএসএস ট্রানজিশন ক্লাসগুলি তালিকার পৃথক কম্পোনেন্টগুলিতে প্রয়োগ করা হবে, নই গ্রুপ/কন্টেইনারে।

TIP

যখন in-DOM টেমপ্লেট ব্যবহার করা হয়, তখন এটিকে <transition-group> হিসেবে উল্লেখ করা উচিত।

Enter / Leave Transitions

এখানে <TransitionGroup> ব্যবহার করে একটি v-for তালিকায় এন্টার/লিভ ট্রানজিশন প্রয়োগ করার একটি উদাহরণ দেওয়া হল:

template
<TransitionGroup name="list" tag="ul">
  <li v-for="item in items" :key="item">
    {{ item }}
  </li>
</TransitionGroup>
css
.list-enter-active,
.list-leave-active {
  transition: all 0.5s ease;
}
.list-enter-from,
.list-leave-to {
  opacity: 0;
  transform: translateX(30px);
}
  • 1
  • 2
  • 3
  • 4
  • 5

Move Transitions

উপরের ডেমোতে কিছু সুস্পষ্ট ত্রুটি রয়েছে: যখন একটি আইটেম ঢোকানো বা সরানো হয়, তখন তার আশেপাশের আইটেমগুলি মসৃণভাবে সরানোর পরিবর্তে অবিলম্বে "জাম্প" করে। আমরা কিছু অতিরিক্ত CSS নিয়ম যোগ করে এটি ঠিক করতে পারি:

css
.list-move, /* চলমান কম্পোনেন্টগুলিতে রূপান্তর প্রয়োগ করুন */
.list-enter-active,
.list-leave-active {
  transition: all 0.5s ease;
}

.list-enter-from,
.list-leave-to {
  opacity: 0;
  transform: translateX(30px);
}

/* নিশ্চিত করুন যে ছেড়ে যাওয়া আইটেমগুলি লেআউট প্রবাহের বাইরে নেওয়া হয়েছে যাতে চলন্ত হয়
    অ্যানিমেশন সঠিকভাবে গণনা করা যেতে পারে। */
.list-leave-active {
  position: absolute;
}

এখন এটি আরও ভাল দেখায় - এমনকি পুরো তালিকাটি এলোমেলো হয়ে গেলে মসৃণভাবে অ্যানিমেটিং করা:

  • 1
  • 2
  • 3
  • 4
  • 5

Full Example

Staggering List Transitions

ডাটা অ্যাট্রিবিউটের মাধ্যমে জাভাস্ক্রিপ্ট ট্রানজিশনের সাথে যোগাযোগ করার মাধ্যমে, একটি তালিকায় ট্রানজিশন স্তব্ধ করাও সম্ভব। প্রথমত, আমরা DOM এলিমেন্টের ডেটা অ্যাট্রিবিউট হিসেবে একটি আইটেমের সূচী রেন্ডার করি:

template
<TransitionGroup
  tag="ul"
  :css="false"
  @before-enter="onBeforeEnter"
  @enter="onEnter"
  @leave="onLeave"
>
  <li
    v-for="(item, index) in computedList"
    :key="item.msg"
    :data-index="index"
  >
    {{ item.msg }}
  </li>
</TransitionGroup>

তারপর, জাভাস্ক্রিপ্ট হুকগুলিতে, আমরা ডেটা অ্যাট্রিবিউটের উপর ভিত্তি করে একটি বিলম্ব সহ কম্পোনেন্টটিকে অ্যানিমেট করি। এই উদাহরণটি অ্যানিমেশন করতে GSAP লাইব্রেরি ব্যবহার করছে:

js
function onEnter(el, done) {
  gsap.to(el, {
    opacity: 1,
    height: '1.6em',
    delay: el.dataset.index * 0.15,
    onComplete: done
  })
}
  • Bruce Lee
  • Jackie Chan
  • Chuck Norris
  • Jet Li
  • Kung Fury

সম্পর্কিত

TransitionGroup has loaded