ترنزیشن گروهی - TransitionGroup ​

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

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

مثال کامل

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

از طریق 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>

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

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

مرتبط

• مستندات ‎<TransitionGroup>‎ API