Ce este componenta
Spre deosebire de <Transition> care operează doar pe un singur element, <TransitionGroup> este concepută special pentru liste de elemente generate cu v-for. Pe lângă clasele clasice de intrare/ieșire, oferă clasa automată v-move care animează deplasarea lină (FLIP animation) a celorlalte elemente din listă la adăugare sau ștergere.
Exemplu Concret: Reordonarea și adăugarea animată a elementelor
<template>
<TransitionGroup name="anim-lista" tag="ul">
<li v-for="item in articole" :key="item.id">
{{ item.titlu }}
</li>
</TransitionGroup>
</template>
<style>
.anim-lista-move, .anim-lista-enter-active, .anim-lista-leave-active {
transition: all 0.5s ease;
}
.anim-lista-enter-from, .anim-lista-leave-to {
opacity: 0;
transform: translateX(30px);
}
</style>
Întrebări & Exemple de Cod:
Componenta <TransitionGroup> în Vue 3Ai o nelămurire despre utilizarea comenzii
Componenta <TransitionGroup> în Vue 3sau ai descoperit un truc / fragment de cod util? Distribuie-l cu ceilalți programatori!Fii primul care pune o întrebare sau distribuie un fragment de cod / prompt!
Nu au fost adăugate încă întrebări sau exemple de cod pentru această pagină. Dacă ai întâlnit o problemă sau ai un snippet util, adaugă-l mai jos pentru a-i ajuta pe ceilalți.