Tengo un punto final de API que construí que devuelve una lista de productos y todo funciona bien. Traté de usar este enlace de github para obtener un ejemplo de trabajo porque el punto final que estoy usando no está disponible públicamente.
En mi caso, digamos que podríamos llegar a este punto final ficticio: https://api.github.com/orgs/vuejs/repos?id=123456 , se devolvería un repositorio y lo que sucede es que aparecería de inmediato. ¿Cómo podríamos hacer que los nuevos elementos aparezcan gradualmente en lugar de aparecer inmediatamente en las solicitudes posteriores?
Por el bien de este ejemplo, ¿cómo podemos hacer que los repositorios se desvanezcan sin envolver el elemento v-if y el elemento v-else con <transition> ? Debería haber una transición cuando this.response = data
const { createApp } = Vue createApp({ data() { return { response: null, loaded: false } }, methods: { fetchData() { fetch('https://api.github.com/orgs/vuejs/repos') .then(response => response.json()) .then(data => { this.response = data; this.loaded = true; }) } }, mounted() { this.fetchData(); }, }).mount('.repo-wrapper') .fade-enter-from, .fade-leave-to { opacity: 0; } .fade-enter-to, .fade-leave-from { opacity: 1; } .fade-enter-active, .fade-leave-active { transition: opacity 0.5s ease; } <script src="https://unpkg.com/vue@3"></script> <div class="repo-wrapper"> <div v-if="!loaded" class="loading-wrapper">LOADING...</div> <div v-else> <transition-group name="fade"> <div v-for="(repo, index) in response" :key="repo.id"> <a :href="repo.html_url" :title="repo.description" target="_blank"> {{ repo.name }} </a> </div> </transition-group> </div> </div>El problema es transition-group está aplicando transiciones a elementos individuales de la lista ya representada. Cuando recupera sus datos, la lista no se representa en absoluto, ya que se oculta después v-else y cuando se muestra por primera vez, eso no cuenta como cambio de lista.
Vea el ejemplo a continuación con cambios:
response es [] en lugar de nulov-for se procesa sin importar si los datos están cargados o no¡Funciona!
const { createApp } = Vue createApp({ data() { return { response: [], } }, methods: { fetchRandom() { this.fetchData(Math.floor(Math.random() * 20)) }, fetchData(pageSize = 10) { fetch(`https://api.github.com/orgs/vuejs/repos?per_page=${pageSize}`) .then(response => response.json()) .then(data => { this.response = data; }) } }, mounted() { this.fetchData(); }, }).mount('.repo-wrapper') .fade-enter-from, .fade-leave-to { opacity: 0; } .fade-enter-to, .fade-leave-from { opacity: 1; } .fade-enter-active, .fade-leave-active { transition: opacity 1s ease; } <script src="https://unpkg.com/vue@3"></script> <div class="repo-wrapper"> <button @click="fetchRandom">Reload</button> <ul> <transition-group name="fade"> <li v-for="(repo, index) in response" :key="repo.id"> <a :href="repo.html_url" :title="repo.description" target="_blank"> {{ repo.name }} </a> </li> </transition-group> </ul> </div>