ટ્રાન્ઝિશનગ્રુપ (TransitionGroup) ​

<TransitionGroup> એ એક બિલ્ટ-ઇન ઘટક છે જે લિસ્ટમાં રેન્ડર થયેલા એલિમેન્ટ્સ અથવા કમ્પોનન્ટ્સના ઇન્સર્શન (insertion), રિમૂવલ (removal) અને ઓર્ડર ચેન્જ (order change) ને એનિમેટ કરવા માટે રચાયેલ છે.

<Transition> થી તફાવત ​

<TransitionGroup> સમાન પ્રોપ્સ, CSS ટ્રાન્ઝિશન ક્લાસીસ અને JavaScript હૂક લિસનર્સને <Transition> ની જેમ જ સપોર્ટ કરે છે, જેમાં નીચેના તફાવતો છે:

• ડિફોલ્ટ રૂપે, તે રેપર એલિમેન્ટ (wrapper element) રેન્ડર કરતું નથી. પરંતુ તમે tag પ્રોપ સાથે રેન્ડર કરવા માટે એલિમેન્ટ ઉલ્લેખ કરી શકો છો.

• ટ્રાન્ઝિશન મોડ્સ ઉપલબ્ધ નથી, કારણ કે આપણે હવે પરસ્પર વિશિષ્ટ ઘટકો (mutually exclusive elements) વચ્ચે વૈકલ્પિક રીતે બદલાતા નથી.

• અંદરના એલિમેન્ટ્સ માટે હંમેશા અનન્ય key એટ્રિબ્યુટ હોવું જરૂરી છે.

• CSS ટ્રાન્ઝિશન ક્લાસીસ લિસ્ટમાં વ્યક્તિગત એલિમેન્ટ્સ પર લાગુ કરવામાં આવશે, ગ્રુપ / કન્ટેનર પર નહીં.

એન્ટર / લીવ ટ્રાન્ઝિશન (Enter / Leave Transitions) ​

અહીં <TransitionGroup> નો ઉપયોગ કરીને v-for લિસ્ટમાં એન્ટર / લીવ ટ્રાન્ઝિશન લાગુ કરવાનું ઉદાહરણ છે:

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

મુવ ટ્રાન્ઝિશન (Move Transitions) ​

ઉપરોક્ત ડેમોમાં કેટલીક સ્પષ્ટ ખામીઓ છે: જ્યારે કોઈ આઇટમ દાખલ કરવામાં આવે અથવા દૂર કરવામાં આવે, ત્યારે તેની આસપાસની આઇટમ્સ સરળતાથી ખસવાને બદલે તરત જ "જમ્પ" કરીને તેની જગ્યાએ આવી જાય છે. અમે કેટલાક વધારાના 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;
}

હવે તે ઘણું સારું લાગે છે - જ્યારે આખું લિસ્ટ શફલ (shuffled) થાય ત્યારે પણ સરળતાથી એનિમેટ થાય છે:

સંપૂર્ણ ઉદાહરણ

કસ્ટમ ટ્રાન્ઝિશનગ્રુપ ક્લાસીસ ​

તમે <TransitionGroup> ને moveClass પ્રોપ પાસ કરીને મૂવિંગ એલિમેન્ટ માટે કસ્ટમ ટ્રાન્ઝિશન ક્લાસીસ પણ સ્પષ્ટ કરી શકો છો, બિલકુલ <Transition> પર કસ્ટમ ટ્રાન્ઝિશન ક્લાસીસ ની જેમ.

સ્ટેગર્ડ લિસ્ટ ટ્રાન્ઝિશન (Staggering List Transitions) ​

ડેટા એટ્રિબ્યુટ્સ દ્વારા JavaScript ટ્રાન્ઝિશન સાથે વાતચીત કરીને, લિસ્ટમાં ટ્રાન્ઝિશનને સ્ટેગર (stagger) કરવું પણ શક્ય છે. પ્રથમ, અમે DOM એલિમેન્ટ પર ડેટા એટ્રિબ્યુટ તરીકે આઇટમની ઇન્ડેક્સ (index) રેન્ડર કરીએ છીએ:

<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 હૂક્સમાં, અમે ડેટા એટ્રિબ્યુટના આધારે વિલંબ (delay) સાથે એલિમેન્ટને એનિમેટ કરીએ છીએ. આ ઉદાહરણ એનિમેશન કરવા માટે GSAP લાઇબ્રેરી નો ઉપયોગ કરી રહ્યું છે:

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

સંબંધિત

• <TransitionGroup> API રિફરન્સ