TransitionGroup ​

<TransitionGroup> هو مكون مدمج مصمم لتحريك عمليات الإدراج والإزالة وتغيير ترتيب العناصر أو المكونات التي تُصَيَّر على شكل قائمة.

الاختلافات عن المكون <Transition> ​

<TransitionGroup> يدعم نفس الخاصيات ، وفئات الانتقال CSS ، ومستمعي خطافات الـJavascript مثل <Transition>، مع الاختلافات التالية:

• بشكل افتراضي ، لا يصيّر العنصر المغلف. ولكن يمكنك تحديد العنصر الذي سيصيّر باستخدام خاصية tag.

• أوضاع الانتقال غير متاحين ، لأننا لم نعد نتبادل بين العناصر المتعارضة.

• العناصر الموجودة بالداخل مطلوبة دائمًا للحصول على سمة مفتاح فريدة.

• ستُطبّق فئات انتقالات CSS على العناصر الفردية في القائمة ، وليس على مجموعة العناصر/العنصر الحاوي نفسه.

انتقالات الدخول / المغادرة ​

فيما يلي مثال لتطبيق انتقالات الدخول / المغادرة على قائمة v-for باستخدام<TransitionGroup>:

<TransitionGroup name="list" tag="ul">
  <li v-for="item in items" :key="item">
    {{ item }}
  </li>
</TransitionGroup>

.list-enter-active,
.list-leave-active {
  transition: all 0.5s ease;
}
.list-enter-from,
.list-leave-to {
  opacity: 0;
  transform: translateX(30px);
}

انتقالات التحريك ​

يحتوي العرض التوضيحي أعلاه على بعض العيوب الواضحة: عندما تُدخل عنصر أو تزيله ، فإن العناصر المحيطة به "تقفز" على الفور إلى مكانها بدلاً من التحرك بسلاسة. يمكننا إصلاح ذلك عن طريق إضافة بعض قواعد 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;
}

الآن تبدو أفضل بكثير - حتى تحرَّك بسلاسة عند خلط القائمة بالكامل:

المثال الكامل

تَعاقُب انتقالات القائمة ​

من خلال التواصل مع انتقالات جافاسكريبت من خلال سمات البيانات ، من الممكن أيضًا إحداث تَعاقُب إنتقالات في القائمة. أولاً ، نعرض مؤشر العنصر كسمة بيانات في عنصر DOM:

<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>

بعد ذلك ، في خطافات JavaScript ، نقوم بتحريك العنصر بتأخيره بناءً على سمة البيانات. هذا المثال يستخدم مكتبة GreenSock لأداء التحريكات:

function onEnter(el, done) {
  gsap.to(el, {
    opacity: 1,
    height: '1.6em',
    delay: el.dataset.index * 0.15,
    onComplete: done
  })
}

ذات صلة

• مرجع الواجهة البرمجية ل <TransitionGroup>