Vue.js

Appearance

On this page

ટ્રાન્ઝિશન (Transition) ​

Vue પરિસ્થિતિ (state) બદલવાના જવાબમાં ટ્રાન્ઝિશન અને એનિમેશન સાથે કામ કરવામાં મદદ કરી શકે તેવા બે બિલ્ટ-ઇન ઘટકો પ્રદાન કરે છે:

  • જ્યારે કોઈ એલિમેન્ટ અથવા કમ્પોનન્ટ DOM માં પ્રવેશી રહ્યું હોય (entering) અને બહાર નીકળી રહ્યું હોય (leaving) ત્યારે એનિમેશન લાગુ કરવા માટે <Transition>. જે આ પેજ પર આવરી લેવામાં આવ્યું છે.

  • જ્યારે કોઈ એલિમેન્ટ અથવા કમ્પોનન્ટ v-for લિસ્ટમાં દાખલ થાય, તેમાંથી દૂર કરવામાં આવે અથવા તેની અંદર ખસેડવામાં આવે ત્યારે એનિમેશન લાગુ કરવા માટે <TransitionGroup>. આ આગામી પ્રકરણમાં આવરી લેવામાં આવ્યું છે.

આ બે ઘટકો સિવાય, આપણે Vue માં અન્ય તકનીકોનો ઉપયોગ કરીને પણ એનિમેશન લાગુ કરી શકીએ છીએ જેમ કે CSS ક્લાસ ટૉગલ કરવા અથવા સ્ટાઇલ બાઈન્ડિંગ્સ દ્વારા સ્ટેટ-ડ્રાઇવન એનિમેશન્સ. આ વધારાની તકનીકો એનિમેશન તકનીકો (Animation Techniques) પ્રકરણમાં આવરી લેવામાં આવી છે.

<Transition> કમ્પોનન્ટ ​

<Transition> એ એક બિલ્ટ-ઇન ઘટક છે: આનો અર્થ એ છે કે તે કોઈપણ ઘટકના ટેમ્પલેટમાં તેને રજીસ્ટર કર્યા વિના ઉપલબ્ધ છે. તેનો ઉપયોગ તેના ડિફોલ્ટ સ્લોટ દ્વારા પસાર કરાયેલા એલિમેન્ટ્સ અથવા કમ્પોનન્ટ્સ પર એન્ટર (enter) અને લીવ (leave) એનિમેશન લાગુ કરવા માટે થઈ શકે છે. પ્રવેશવું અથવા છોડવું નીચેનામાંથી એક દ્વારા ટ્રિગર થઈ શકે છે:

  • v-if દ્વારા કન્ડિશનલ રેન્ડરિંગ
  • v-show દ્વારા કન્ડિશનલ ડિસ્પ્લે
  • <component> સ્પેશિયલ એલિમેન્ટ દ્વારા ડાયનેમિક કમ્પોનન્ટ્સ ટૉગલિંગ
  • સ્પેશિયલ key એટ્રિબ્યુટ બદલવું

આ સૌથી મૂળભૂત વપરાશનું ઉદાહરણ છે:

template
<button @click="show = !show">Toggle</button>
<Transition>
  <p v-if="show">હેલો!</p>
</Transition>
css
/* અમે આગળ સમજાવીશું કે આ ક્લાસ શું કરે છે! */
.v-enter-active,
.v-leave-active {
  transition: opacity 0.5s ease;
}

.v-enter-from,
.v-leave-to {
  opacity: 0;
}

hello

Playground માં તે અજમાવી જુઓ

Playground માં તે અજમાવી જુઓ

TIP

<Transition> તેના સ્લોટ કન્ટેન્ટ તરીકે માત્ર સિંગલ એલિમેન્ટ અથવા કમ્પોનન્ટને સપોર્ટ કરે છે. જો કન્ટેન્ટ કમ્પોનન્ટ હોય, તો કમ્પોનન્ટમાં પણ માત્ર એક જ રૂટ એલિમેન્ટ હોવો જોઈએ.

જ્યારે <Transition> કમ્પોનન્ટમાં કોઈ એલિમેન્ટ દાખલ કરવામાં આવે અથવા દૂર કરવામાં આવે, ત્યારે આ થાય છે:

૧. Vue આપમેળે તે જોશે કે ટાર્ગેટ એલિમેન્ટમાં CSS ટ્રાન્ઝિશન અથવા એનિમેશન લાગુ કરવામાં આવ્યા છે કે નહીં. જો એમ હોય, તો યોગ્ય સમયે સંખ્યાબંધ CSS ટ્રાન્ઝિશન ક્લાસીસ ઉમેરવામાં / દૂર કરવામાં આવશે.

૨. જો JavaScript હૂક્સ માટે લિસનર્સ હોય, તો આ હૂક્સ યોગ્ય સમયે કૉલ કરવામાં આવશે.

૩. જો કોઈ CSS ટ્રાન્ઝિશન / એનિમેશન શોધી શકાતું નથી અને કોઈ JavaScript હૂક્સ આપવામાં આવ્યા નથી, તો ઇન્સર્શન (insertion) અને/અથવા રિમૂવલ (removal) માટેના DOM ઓપરેશન્સ બ્રાઉઝરની આગામી એનિમેશન ફ્રેમ પર અમલમાં આવશે.

CSS-આધારિત ટ્રાન્ઝિશન ​

ટ્રાન્ઝિશન ક્લાસીસ (Transition Classes) ​

એન્ટર / લીવ ટ્રાન્ઝિશન માટે છ ક્લાસીસ લાગુ કરવામાં આવે છે.

ટ્રાન્ઝિશન ડાયાગ્રામ

૧. v-enter-from: એન્ટર માટે પ્રારંભિક અવસ્થા. એલિમેન્ટ દાખલ થાય તે પહેલાં ઉમેરવામાં આવે છે, જે એલિમેન્ટ દાખલ થયાની એક ફ્રેમ પછી દૂર કરવામાં આવે છે.

૨. v-enter-active: એન્ટર માટે એક્ટિવ સ્ટેટ. સમગ્ર પ્રવેશના તબક્કા (entering phase) દરમિયાન લાગુ કયારે આવે છે. એલિમેન્ટ દાખલ થાય તે પહેલાં ઉમેરવામાં આવે છે, ટ્રાન્ઝિશન/એનિમેશન સમાપ્ત થાય ત્યારે દૂર કરવામાં આવે છે. આ ક્લાસનો ઉપયોગ પ્રવેશ ટ્રાન્ઝિશન માટે ડ્યુરેશન (duration), વિલંબ (delay) અને ઇઝિંગ કર્વ (easing curve) વ્યાખ્યાયિત કરવા માટે થઈ શકે છે.

૩. v-enter-to: એન્ટર માટે અંતિમ સ્થિતિ. એલિમેન્ટ દાખલ થયાની એક ફ્રેમ પછી ઉમેરવામાં આવે છે (જે જ સમયે v-enter-from દૂર કરવામાં આવે છે), ટ્રાન્ઝિશન/એનિમેશન સમાપ્ત થાય ત્યારે દૂર કરવામાં આવે છે.

૪. v-leave-from: લીવ માટે પ્રારંભિક સ્થિતિ. જ્યારે લીવિંગ ટ્રાન્ઝિશન ટ્રિગર થાય ત્યારે તરત જ ઉમેરવામાં આવે છે, એક ફ્રેમ પછી દૂર કરવામાં આવે છે.

૫. v-leave-active: લીવ માટે એક્ટિવ સ્ટેટ. સમગ્ર બહાર નીકળવાના તબક્કા (leaving phase) દરમિયાન લાગુ કરવામાં આવે છે. જ્યારે લીવિંગ ટ્રાન્ઝિશન ટ્રિગર થાય ત્યારે તરત જ ઉમેરવામાં આવે છે, ટ્રાન્ઝિશન/એનિમેશન સમાપ્ત થાય ત્યારે દૂર કરવામાં આવે છે. આ ક્લાસનો ઉપયોગ બહાર નીકળતા ટ્રાન્ઝિશન માટે સમયગાળો, વિલંબ અને ઇઝિંગ કર્વ વ્યાખ્યાયિત કરવા માટે થઈ શકે છે.

૬. v-leave-to: લીવ માટે અંતિમ સ્થિતિ. જ્યારે લીવિંગ ટ્રાન્ઝિશન ટ્રિગર થાય તેની એક ફ્રેમ પછી ઉમેરવામાં આવે છે (તે જ સમયે v-leave-from દૂર કરવામાં આવે છે), ટ્રાન્ઝિશન/એનિમેશન સમાપ્ત થાય ત્યારે દૂર કરવામાં આવે છે.

v-enter-active અને v-leave-active અમને એન્ટર / લીવ ટ્રાન્ઝિશન માટે અલગ-અલગ ઇઝિંગ કર્વ્સ સ્પષ્ટ કરવાની ક્ષમતા આપે છે, જેનું ઉદાહરણ આપણે આગામી વિભાગોમાં જોઈશું.

નામવાળા ટ્રાન્ઝિશન (Named Transitions) ​

name પ્રોપ દ્વારા ટ્રાન્ઝિશનને નામ આપી શકાય છે:

template
<Transition name="fade">
  ...
</Transition>

નામવાળા ટ્રાન્ઝિશન માટે, તેના ટ્રાન્ઝિશન ક્લાસીસ v ને બદલે તેના નામથી શરૂ થશે. ઉદાહરણ તરીકે, ઉપરોક્ત ટ્રાન્ઝિશન માટે લાગુ શૈલી v-enter-active ને બદલે fade-enter-active હશે. ફેડ ટ્રાન્ઝિશન માટેનું CSS આના જેવું દેખાવું જોઈએ:

css
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

CSS ટ્રાન્ઝિશન (CSS Transitions) ​

મૂળભૂત ઉદાહરણમાં જોયું તેમ <Transition> નો સૌથી સામાન્ય રીતે નેટિવ CSS ટ્રાન્ઝિશન ના સંયોજનમાં ઉપયોગ કરવામાં આવે છે. transition CSS પ્રોપર્ટી એક શોર્ટહેન્ડ છે જે આપણને એનિમેટેડ પ્રોપર્ટીઝ, ટ્રાન્ઝિશનનો સમયગાળો અને ઇઝિંગ કર્વ્સ (easing curves) સહિત ટ્રાન્ઝિશનના બહુવિધ પાસાઓને સ્પષ્ટ કરવાની મંજૂરી આપે છે.

અહીં એક વધુ અદ્યતન ઉદાહરણ છે જે બહુવિધ પ્રોપર્ટીઝનું ટ્રાન્ઝિશન કરે છે, જેમાં પ્રવેશવા અને બહાર નીકળવા માટે અલગ-અલગ ડ્યુરેશન અને ઇઝિંગ કર્વ્સ છે:

template
<Transition name="slide-fade">
  <p v-if="show">હેલો!</p>
</Transition>
css
/*
  એન્ટર અને લીવ એનિમેશન વિવિધ સમયગાળા (durations) 
  અને ટાઇમિંગ ફંક્શન્સનો ઉપયોગ કરી શકે છે.
*/
.slide-fade-enter-active {
  transition: all 0.3s ease-out;
}

.slide-fade-leave-active {
  transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-fade-enter-from,
.slide-fade-leave-to {
  transform: translateX(20px);
  opacity: 0;
}

hello

Playground માં તે અજમાવી જુઓ

Playground માં તે અજમાવી જુઓ

CSS એનિમેશન્સ (CSS Animations) ​

નેટિવ CSS એનિમેશન્સ CSS ટ્રાન્ઝિશનની જેમ જ લાગુ કરવામાં આવે છે, તફાવત એ છે કે એલિમેન્ટ દાખલ થયા પછી તરત જ *-enter-from દૂર કરવામાં આવતું નથી, પરંતુ animationend ઇવેન્ટ પર દૂર કરવામાં આવે છે.

મોટાભાગના CSS એનિમેશન્સ માટે, આપણે તેને ફક્ત *-enter-active અને *-leave-active ક્લાસ હેઠળ જાહેર કરી શકીએ છીએ. અહીં એક ઉદાહરણ છે:

template
<Transition name="bounce">
  <p v-if="show" style="text-align: center;">
    હેલો અહીં કેટલીક ઉછળતી ટેક્સ્ટ છે!
  </p>
</Transition>
css
.bounce-enter-active {
  animation: bounce-in 0.5s;
}
.bounce-leave-active {
  animation: bounce-in 0.5s reverse;
}
@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.25);
  }
  100% {
    transform: scale(1);
  }
}

Hello here is some bouncy text!

Playground માં તે અજમાવી જુઓ

Playground માં તે અજમાવી જુઓ

કસ્ટમ ટ્રાન્ઝિશન ક્લાસીસ (Custom Transition Classes) ​

તમે <Transition> ને નીચેના પ્રોપ્સ પસાર કરીને કસ્ટમ ટ્રાન્ઝિશન ક્લાસીસ પણ સ્પષ્ટ કરી શકો છો:

  • enter-from-class
  • enter-active-class
  • enter-to-class
  • leave-from-class
  • leave-active-class
  • leave-to-class

આ પરંપરાગત ક્લાસ નામોને ઓવરરાઇડ કરશે. આ ખાસ કરીને ઉપયોગી છે જ્યારે તમે Vue ની ટ્રાન્ઝિશન સિસ્ટમને અસ્તિત્વમાં હોય તેવી CSS એનિમેશન લાઇબ્રેરી સાથે જોડવા માંગતા હો, જેમ કે Animate.css:

template
<!-- ધારો કે Animate.css પેજ પર સમાવિષ્ટ છે -->
<Transition
  name="custom-classes"
  enter-active-class="animate__animated animate__tada"
  leave-active-class="animate__animated animate__bounceOutRight"
>
  <p v-if="show">હેલો!</p>
</Transition>

Playground માં તે અજમાવી જુઓ

Playground માં તે અજમાવી જુઓ

ટ્રાન્ઝિશન અને એનિમેશનનો સાથે ઉપયોગ ​

ટ્રાન્ઝિશન ક્યારે સમાપ્ત થયું તે જાણવા માટે Vue એ ઇવેન્ટ લિસનર્સ જોડવાની જરૂર છે. તે લાગુ કરેલ CSS નિયમોના પ્રકાર પર આધાર રાખીને transitionend અથવા animationend હોઈ શકે છે. જો તમે માત્ર એક અથવા બીજાનો ઉપયોગ કરી રહ્યાં છો, તો Vue આપમેળે સાચો પ્રકાર શોધી શકે છે.

જો કે, કેટલાક કિસ્સાઓમાં તમે સમાન ઘટક પર બંને રાખવા ઈચ્છી શકો છો, ઉદાહરણ તરીકે Vue દ્વારા ટ્રિગર કરાયેલ CSS એનિમેશન હોવું, તેની સાથે હોવર (hover) પર CSS ટ્રાન્ઝિશન ઇફેક્ટ હોવી. આ કિસ્સાઓમાં, તમારે type પ્રોપ પાસ કરીને Vue જેની કાળજી લેવા માંગતા હોય તે પ્રકાર સ્પષ્ટપણે જાહેર કરવો પડશે, જેમાં animation અથવા transition ની કિંમત હશે:

template
<Transition type="animation">...</Transition>

નેસ્ટેડ ટ્રાન્ઝિશન અને સ્પષ્ટ ટ્રાન્ઝિશન ડ્યુરેશન્સ ​

જોકે ટ્રાન્ઝિશન ક્લાસીસ માત્ર <Transition> માં બાળ (child) એલિમેન્ટ પર લાગુ કરવામાં આવે છે, આપણે નેસ્ટેડ CSS સિલેક્ટર્સનો ઉપયોગ કરીને નેસ્ટેડ એલિમેન્ટ્સનું ટ્રાન્ઝિશન કરી શકીએ છીએ:

template
<Transition name="nested">
  <div v-if="show" class="outer">
    <div class="inner">
      હેલો!
    </div>
  </div>
</Transition>
css
/* નેસ્ટેડ એલિમેન્ટ્સને ટાર્ગેટ કરતા નિયમો */
.nested-enter-active .inner,
.nested-leave-active .inner {
  transition: all 0.3s ease-in-out;
}

.nested-enter-from .inner,
.nested-leave-to .inner {
  transform: translateX(30px);
  opacity: 0;
}

/* ... જરૂર મુજબ અન્ય CSS */

અમે પ્રવેશ પર નેસ્ટેડ એલિમેન્ટમાં ટ્રાન્ઝિશન વિલંબ (delay) પણ ઉમેરી શકીએ છીએ, જે સ્ટેગર્ડ (staggered) એન્ટર એનિમેશન સિક્વન્સ બનાવે છે:

css
/* સ્ટેગર્ડ અસર માટે નેસ્ટેડ એલિમેન્ટના એન્ટરમાં વિલંબ કરો */
.nested-enter-active .inner {
  transition-delay: 0.25s;
}

જો કે, આ એક નાની સમસ્યા ઉભી કરે છે. ડિફોલ્ટ રૂપે, <Transition> કમ્પોનન્ટ રૂટ ટ્રાન્ઝિશન એલિમેન્ટ પરની પ્રથમ transitionend અથવા animationend ઇવેન્ટને સાંભળીને ટ્રાન્ઝિશન ક્યારે સમાપ્ત થયું છે તે આપમેળે શોધવાનો પ્રયાસ કરે છે. નેસ્ટેડ ટ્રાન્ઝિશન સાથે, ઇચ્છિત વર્તન તમામ આંતરિક તત્વોના ટ્રાન્ઝિશન સમાપ્ત થાય ત્યાં સુધી રાહ જોવાનું હોવું જોઈએ.

આવા કિસ્સાઓમાં તમે <Transition> કમ્પોનન્ટ પર duration પ્રોપનો ઉપયોગ કરીને સ્પષ્ટ ટ્રાન્ઝિશન ડ્યુરેશન (મિલિસેકન્ડમાં) સ્પષ્ટ કરી શકો છો. કુલ સમયગાળો વિલંબ ઉપરાંત આંતરિક તત્વના ટ્રાન્ઝિશન સમયગાળા સાથે મેળ ખાતો હોવો જોઈએ:

template
<Transition :duration="550">...</Transition>
Hello

Playground માં તે અજમાવી જુઓ

જો જરૂરી હોય તો, તમે ઓબ્જેક્ટનો ઉપયોગ કરીને એન્ટર અને લીવ ડ્યુરેશન માટે અલગ વેલ્યુ પણ સ્પષ્ટ કરી શકો છો:

template
<Transition :duration="{ enter: 500, leave: 800 }">...</Transition>

પરફોર્મન્સ સંબંધિત બાબતો (Performance Considerations) ​

તમે નોંધશો કે મહાર બતાવેલા એનિમેશન મોટે ભાગે transform અને opacity જેવી પ્રોપર્ટીઝનો ઉપયોગ કરે છે. આ પ્રોપર્ટીઝ એનિમેટ કરવા માટે કાર્યક્ષમ છે કારણ કે:

૧. તેઓ એનિમેશન દરમિયાન દસ્તાવેજના લેઆઉટને અસર કરતા નથી, તેથી તેઓ દરેક એનિમેશન ફ્રેમ પર મોંઘા CSS લેઆઉટની ગણતરી (layout calculation) ટ્રિગર કરતા નથી.

૨. મોટાભાગના આધુનિક બ્રાઉઝર્સ transform ને એનિમેટ કરતી વખતે GPU હાર્ડવેર એક્સિલરેશનનો લાભ લઈ શકે છે.

તેનાથી વિપરીત, height અથવા margin જેવી પ્રોપર્ટીઝ CSS લેઆઉટને ટ્રિગર કરશે, તેથી તેને એનિમેટ કરવા માટે ઘણું મોંઘું છે અને સાવચેતી સાથે ઉપયોગ કરવો જોઈએ.

JavaScript હૂક્સ (Hooks) ​

તમે <Transition> કમ્પોનન્ટ પરની ઇવેન્ટ્સ સાંભળીને JavaScript સાથે ટ્રાન્ઝિશન પ્રક્રિયામાં હૂક કરી શકો છો:

template
<Transition
  @before-enter="onBeforeEnter"
  @enter="onEnter"
  @after-enter="onAfterEnter"
  @enter-cancelled="onEnterCancelled"
  @before-leave="onBeforeLeave"
  @leave="onLeave"
  @after-leave="onAfterLeave"
  @leave-cancelled="onLeaveCancelled"
>
  <!-- ... -->
</Transition>
js
// એલિમેન્ટને DOM માં દાખલ કરવામાં આવે તે પહેલાં કૉલ કરવામાં આવે છે.
// એલિમેન્ટની "enter-from" સ્થિતિ સેટ કરવા માટે આનો ઉપયોગ કરો
function onBeforeEnter(el) {}

// એલિમેન્ટ દાખલ થયાની એક ફ્રેમ પછી કૉલ કરવામાં આવે છે.
// પ્રવેશી રહેલા (entering) એનિમેશનને શરૂ કરવા માટે આનો ઉપયોગ કરો.
function onEnter(el, done) {
  // ટ્રાન્ઝિશનનો અંત સૂચવવા માટે ડન (done) કોલબેકને કૉલ કરો
  // જો CSS સાથે સંયોજનમાં ઉપયોગ કરવામાં આવે તો વૈકલ્પિક
  done()
}

// જ્યારે પ્રવેશ ટ્રાન્ઝિશન પૂર્ણ થાય ત્યારે કૉલ કરવામાં આવે છે.
function onAfterEnter(el) {}

// જ્યારે એન્ટર ટ્રાન્ઝિશન પૂર્ણ થાય તે પહેલાં રદ કરવામાં આવે ત્યારે કૉલ કરવામાં આવે છે.
function onEnterCancelled(el) {}

// લીવ હૂક પહેલાં કૉલ કરવામાં આવે છે.
// મોટાભાગે, તમારે ફક્ત લીવ હૂકનો ઉપયોગ કરવો જોઈએ
function onBeforeLeave(el) {}

// જ્યારે બહાર નીકળવાનું (leave) ટ્રાન્ઝિશન શરૂ થાય ત્યારે કૉલ કરવામાં આવે છે.
// લીવિંગ એનિમેશન શરૂ કરવા માટે આનો ઉપયોગ કરો.
function onLeave(el, done) {
  // ટ્રાન્ઝિશનનો અંત સૂચવવા માટે ડન (done) કોલબેકને કૉલ કરો
  // જો CSS સાથે સંયોજનમાં ઉપયોગ કરવામાં આવે તો વૈકલ્પિક
  done()
}

// જ્યારે લીવ ટ્રાન્ઝિશન સમાપ્ત થાય અને 
// એલિમેન્ટને DOM માંથી દૂર કરવામાં આવે ત્યારે કૉલ કરવામાં આવે છે.
function onAfterLeave(el) {}

// ફક્ત v-show ટ્રાન્ઝિશન સાથે ઉપલબ્ધ છે
function onLeaveCancelled(el) {}
js
export default {
  // ...
  methods: {
    // એલિમેન્ટને DOM માં દાખલ કરવામાં આવે તે પહેલાં કૉલ કરવામાં આવે છે.
    // એલિમેન્ટની "enter-from" સ્થિતિ સેટ કરવા માટે આનો ઉપયોગ કરો
    onBeforeEnter(el) {},

    // એલિમેન્ટ દાખલ થયાની એક ફ્રેમ પછી કૉલ કરવામાં આવે છે.
    // એનિમેશન શરૂ કરવા માટે આનો ઉપયોગ કરો.
    onEnter(el, done) {
      // ટ્રાન્ઝિશનનો અંત સૂચવવા માટે ડન (done) કોલબેકને કૉલ કરો
      // જો CSS સાથે સંયોજનમાં ઉપયોગ કરવામાં આવે તો વૈકલ્પિક
      done()
    },

    // જ્યારે પ્રવેશ ટ્રાન્ઝિશન પૂર્ણ થાય ત્યારે કૉલ કરવામાં આવે છે.
    onAfterEnter(el) {},

    // જ્યારે એન્ટર ટ્રાન્ઝિશન પૂર્ણ થાય તે પહેલાં રદ કરવામાં આવે ત્યારે કૉલ કરવામાં આવે છે.
    onEnterCancelled(el) {},

    // લીવ હૂક પહેલાં કૉલ કરવામાં આવે છે.
    // મોટાભાગે, તમારે ફક્ત લીવ હૂકનો ઉપયોગ કરવો જોઈએ.
    onBeforeLeave(el) {},

    // જ્યારે બહાર નીકળવાનું (leave) ટ્રાન્ઝિશન શરૂ થાય ત્યારે કૉલ કરવામાં આવે છે.
    // લીવિંગ એનિમેશન શરૂ કરવા માટે આનો ઉપયોગ કરો.
    onLeave(el, done) {
      // ટ્રાન્ઝિશનનો અંત સૂચવવા માટે ડન (done) કોલબેકને કૉલ કરો
      // જો CSS સાથે સંયોજનમાં ઉપયોગ કરવામાં આવે તો વૈકલ્પિક
      done()
    },

    // જ્યારે લીવ ટ્રાન્ઝિશન સમાપ્ત થાય અને 
    // એલિમેન્ટને DOM માંથી દૂર કરવામાં આવે ત્યારે કૉલ કરવામાં આવે છે.
    onAfterLeave(el) {},

    // ફક્ત v-show ટ્રાન્ઝિશન સાથે ઉપલબ્ધ છે
    onLeaveCancelled(el) {}
  }
}

આ હૂકનો ઉપયોગ CSS ટ્રાન્ઝિશન / એનિમેશન સાથે અથવા તેની જાતે જ કરી શકાય છે.

માત્ર JavaScript-ઓન્લી ટ્રાન્ઝિશનનો ઉપયોગ કરતી વખતે, :css="false" પ્રોપ ઉમેરવી સામાન્ય રીતે સારો વિચાર છે. આ સ્પષ્ટપણે Vue ને ઓટો CSS ટ્રાન્ઝિશન ડિટેક્શન છોડવાનું કહે છે. થોડું વધુ પરફોર્મન્ટ હોવા ઉપરાંત, આ CSS નિયમોને આકસ્મિક રીતે ટ્રાન્ઝિશનમાં દખલ કરતા અટકાવે છે:

template
<Transition
  ...
  :css="false"
>
  ...
</Transition>

:css="false" સાથે, ટ્રાન્ઝિશન ક્યારે સમાપ્ત થાય છે તે નિયંત્રિત કરવા માટે આપણે સંપૂર્ણપણે જવાબદાર છીએ. આ કિસ્સામાં, @enter અને @leave હૂક્સ માટે done કોલબેક્સ જરૂરી છે. અન્યથા, હૂક્સ સિંક્રનસ રીતે કૉલ કરવામાં આવશે અને ટ્રાન્ઝિશન તરત જ સમાપ્ત થઈ જશે.

એનિમેશન કરવા માટે GSAP લાઇબ્રેરી નો ઉપયોગ કરીને ડેમો અહીં છે. તમે, અલબત્ત, અન્ય કોઈપણ એનિમેશન લાઇબ્રેરીનો ઉપયોગ કરી શકો છો જે તમે ઇચ્છો છો, ઉદાહરણ તરીકે Anime.js અથવા Motion One:

Playground માં તે અજમાવી જુઓ

Playground માં તે અજમાવી જુઓ

પુનઃઉપયોગી ટ્રાન્ઝિશન (Reusable Transitions) ​

Vue ની કમ્પોનન્ટ સિસ્ટમ દ્વારા ટ્રાન્ઝિશનનો ફરીથી ઉપયોગ કરી શકાય છે. પુનઃઉપયોગી ટ્રાન્ઝિશન બનાવવા માટે, આપણે એક કમ્પોનન્ટ બનાવી શકીએ છીએ જે <Transition> કમ્પોનન્ટને લપેટી લે છે અને સ્લોટ કન્ટેન્ટ નીચે પસાર કરે છે:

MyTransition.vue
vue
<script>
// JavaScript હૂક્સ લોજિક...
</script>

<template>
  <!-- બિલ્ટ-ઇન ટ્રાન્ઝિશન કમ્પોનન્ટને લપેટી લો -->
  <Transition
    name="my-transition"
    @enter="onEnter"
    @leave="onLeave">
    <slot></slot> <!-- સ્લોટ કન્ટેન્ટ દ્વારા નીચે પાસ કરો -->
  </Transition>
</template>

<style>
/*
  જરૂરી CSS...
  નોંધ: અહીં <style scoped> નો ઉપયોગ કરવાનું ટાળો કારણ કે 
  તે સ્લોટ કન્ટેન્ટ પર લાગુ પડતું નથી.
*/
</style>

હવે MyTransition ને બ્રાઉઝર-લક્ષી વર્ઝનની જેમ જ ઇમ્પોર્ટ અને ઉપયોગ કરી શકાય છે:

template
<MyTransition>
  <div v-if="show">હેલો!</div>
</MyTransition>

દેખાવ પર ટ્રાન્ઝિશન (Transition on Appear) ​

જો તમે નોડના પ્રારંભિક રેન્ડર (initial render) પર ટ્રાન્ઝિશન પણ લાગુ કરવા માંગતા હો, તો તમે appear પ્રોપ ઉમેરી શકો છો:

template
<Transition appear>
  ...
</Transition>

એલિમેન્ટ્સ વચ્ચે ટ્રાન્ઝિશન ​

v-if / v-show સાથે એલિમેન્ટને ટૉગલ કરવા ઉપરાંત, આપણે v-if / v-else / v-else-if નો ઉપયોગ કરીને બે એલિમેન્ટ્સ વચ્ચે ટ્રાન્ઝિશન પણ કરી શકીએ છીએ, જો આપણે ખાતરી કરીએ કે કોઈપણ ક્ષણે માત્ર એક જ એલિમેન્ટ બતાવવામાં આવી રહ્યો છે:

template
<Transition>
  <button v-if="docState === 'saved'">Edit</button>
  <button v-else-if="docState === 'edited'">Save</button>
  <button v-else-if="docState === 'editing'">Cancel</button>
</Transition>
Click to cycle through states:

Playground માં તે અજમાવી જુઓ

ટ્રાન્ઝિશન મોડ્સ (Transition Modes) ​

અગાઉના ઉદાહરણમાં, પ્રવેશતા અને બહાર નીકળતા એલિમેન્ટ્સ સમાન સમયે એનિમેટેડ હોય છે, અને જ્યારે બંને એલિમેન્ટ્સ DOM માં હાજર હોય ત્યારે લેઆઉટની સમસ્યા ટાળવા માટે આપણે તેને position: absolute બનાવવા પડ્યા હતા.

જો કે, કેટલાક કિસ્સાઓમાં આ વિકલ્પ નથી હોતો, અથવા ફક્ત તે ઇચ્છિત વર્તન હોતું નથી. અમે ઈચ્છી શકીએ છીએ કે બહાર નીકળતું એલિમેન્ટ પહેલા એનિમેટેડ થઈ જાય અને પ્રવેશતું એલિમેન્ટ લીવિંગ એનિમેશન સમાપ્ત થયા પછી જ દાખલ કરવામાં આવે. આવા એનિમેશનને મેન્યુઅલી ઓર્કેસ્ટ્રેટ કરવું ખૂબ જ જટિલ હશે - સદનસીબે, આપણે <Transition> ને mode પ્રોપ પસાર કરીને આ વર્તનને સક્ષમ કરી શકીએ છીએ:

template
<Transition mode="out-in">
  ...
</Transition>

mode="out-in" સાથેનો અગાઉનો ડેમો અહીં છે:

Click to cycle through states:

<Transition> એ mode="in-out" ને પણ સપોર્ટ કરે છે, જોકે તેનો ઉપયોગ ભાગ્યે જ થાય છે.

કમ્પોનન્ટ્સ વચ્ચે ટ્રાન્ઝિશન ​

<Transition> નો ઉપયોગ ડાયનેમિક કમ્પોનન્ટ્સ ની આસપાસ પણ થઈ શકે છે:

template
<Transition name="fade" mode="out-in">
  <component :is="activeComponent"></component>
</Transition>
Component A

Playground માં તે અજમાવી જુઓ

Playground માં તે અજમાવી જુઓ

ડાયનેમિક ટ્રાન્ઝિશન (Dynamic Transitions) ​

<Transition> ના name જેવા પ્રોપ્સ પણ ડાયનેમિક હોઈ શકે છે! તે આપણને સ્ટેટ ચેન્જના આધારે વિવિધ ટ્રાન્ઝિશન ગતિશીલ રીતે લાગુ કરવાની મંજૂરી આપે છે:

template
<Transition :name="transitionName">
  <!-- ... -->
</Transition>

આ ત્યારે ઉપયોગી થઈ શકે છે જ્યારે તમે Vue ના ટ્રાન્ઝિશન ક્લાસ પરંપરાઓનો ઉપયોગ કરીને CSS ટ્રાન્ઝિશન / એનિમેશન વ્યાખ્યાયિત કર્યા હોય અને તેમની વચ્ચે સ્વિચ કરવા માંગતા હોવ.

તમે તમારા ઘટકની વર્તમાન સ્થિતિના આધારે JavaScript ટ્રાન્ઝિશન હૂક્સમાં અલગ વર્તન પણ લાગુ કરી શકો છો. છેલ્લે, ડાયનેમિક ટ્રાન્ઝિશન બનાવવાનો અંતિમ માર્ગ પુનઃઉપયોગી ટ્રાન્ઝિશન કમ્પોનન્ટ્સ દ્વારા છે જે વાપરવા માટેના ટ્રાન્ઝિશનના સ્વભાવને બદલવા માટે પ્રોપ્સ સ્વીકારે છે. તે ચીઝી લાગી શકે છે, પરંતુ ખરેખર માત્ર તમારી કલ્પના જ સીમા છે.

Key એટ્રિબ્યુટ સાથે ટ્રાન્ઝિશન ​

કેટલીકવાર તમારે ટ્રાન્ઝિશન થવા માટે DOM એલિમેન્ટને ફરીથી રેન્ડર કરવા માટે દબાણ કરવાની જરૂર હોય છે.

ઉદાહરણ તરીકે આ કાઉન્ટર (counter) ઘટક લો:

vue
<script setup>
import { ref } from 'vue';
const count = ref(0);

setInterval(() => count.value++, 1000);
</script>

<template>
  <Transition>
    <span :key="count">{{ count }}</span>
  </Transition>
</template>
vue
<script>
export default {
  data() {
    return {
      count: 1,
      interval: null 
    }
  },
  mounted() {
    this.interval = setInterval(() => {
      this.count++;
    }, 1000)
  },
  beforeDestroy() {
    clearInterval(this.interval)
  }
}
</script>

<template>
  <Transition>
    <span :key="count">{{ count }}</span>
  </Transition>
</template>

જો આપણે key એટ્રિબ્યુટને બાકાત રાખ્યું હોત, તો માત્ર ટેક્સ્ટ નોડ અપડેટ કરવામાં આવ્યો હોત અને આ રીતે કોઈ ટ્રાન્ઝિશન થયું ન હોત. જો કે, key એટ્રિબ્યુટની હાજરીમાં, Vue જાણે છે કે જ્યારે પણ count બદલાય ત્યારે નવું span એલિમેન્ટ બનાવવાનું હોય છે અને આમ Transition કમ્પોનન્ટ પાસે ટ્રાન્ઝિશન કરવા માટે ૨ અલગ એલિમેન્ટ્સ હોય છે.

Playground માં તે અજમાવી જુઓ

Playground માં તે અજમાવી જુઓ

સંબંધિત

Edit this page on GitHub