انتقال گروهی ​

<TransitionGroup> یک کامپوننت تعبیه‌شده است که برای انیمیشن‌ دادن به ورود ، حذف و تغییر ترتیب عناصر یا کامپوننت‌هایی که در یک لیست نمایش داده می‌شوند طراحی شده است.

تفاوت<TransitionGroup> با <Transition> ​

<TransitionGroup> از همان پراپ ها ، کلاس‌های CSS و هوک های <Transition> پشتیبانی می‌کند. با تفاوت‌های زیر :

• بصورت پیش‌فرض، کامپوننت wrapper-المانی که برای گروه‌بندی و مدیریت المان ها به کار می رود - را رندر نمیکند. اما می‌توانید با استفاده از ویژگی tag المان مورد نظر خود را برای رندر کردن مشخص کنید.
• حالت‌های انتقال در دسترس نیستند، چون در این حالت نیازی نیست بین عناصر جدا از هم ترنزیشن اعمال کنیم.
• هر عنصری داخلی، باید key یکتا داشته باشد.
• کلاس‌های 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;
}

حالا به نظر خیلی بهتر می‌آید - حتی در هنگام شافل ،کل لیست به صورت نرم و انیمیشن دار جا به جا می‌شود:

Full Example

انتقال‌های متوالی در لیست ​

از طریق data-attribute ها، می توانیم انتقال‌های متوالی در یک لیست به وجود آوریم. ابتدا، ما ایندکس را به عنوان یک data-attribute روی المان اعمال می‌کنیم.

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

سپس، در هوک‌های جاوااسکریپت، به عنصر بر اساس ایندکس آن با تأخیر انیمیشن می‌دهیم. در این مثال از کتابخانه GreenSock برای انیمیشن استفاده می‌شود.

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

Related

• مرجع API <TransitionGroup>