Vue.js

উপস্থিতি

এই পৃষ্ঠায়

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

Custom TransitionGroup classes ​

এছাড়াও আপনি চলমান উপাদানের জন্য কাস্টম ট্রানজিশন ক্লাস নির্দিষ্ট করতে পারেন moveClass প্রপকে <TransitionGroup>-এ পাস করে, ঠিক যেমন <Transition>-এ কাস্টম ট্রানজিশন ক্লাস।

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

সম্পূর্ণ উদাহরণ চেষ্টা করুন

সম্পূর্ণ উদাহরণ চেষ্টা করুন

সম্পর্কিত

GitHub-এ এই পৃষ্ঠাটি সম্পাদনা করুন