Je suis nouveau dans Vue js et les transitions et je conçois un composant Vue, dans lequel j'ai l'intention d'emballer des données chargées paresseusement à partir du serveur de sorte que lorsque les données est indisponible, un gif de chargement est affiché.transition de fondu entrant et sortant pour deux éléments différents en même temps
Cela fonctionne très bien. Cependant, quand j'ajoute une simple transition de fondu pour faire fondre le fondu gif et que le contenu s'estompe quand les données sont disponibles (ou vice versa) en même temps, le contenu et le gif se poussent l'un vers le haut ou vers le bas quand l'un apparaît et l'autre disparaître.
Ceci est mon fichier Lazy.vue composant:
<template>
<div class="fixed-pos">
<transition name="fade">
<slot v-if="loaded"></slot>
<div v-else>
<img src="../assets/loading.gif"/>
</div>
</transition>
</div>
</template>
<script>
export default {
name: 'Lazy',
props: {
loaded: {
type: Boolean
}
}
}
</script>
Et un usage de l'échantillon de celui-ci:
<template>
<div>
<button @click="loaded = !loaded">Toggle</button>
<lazy :loaded="loaded">
<ul v-if="rendered">
<transition-group name="fade">
<li v-for="notif in notifs" v-bind:key="notif">
<span>{{notif}}</span>
</li>
</transition-group>
</ul>
</lazy>
</div>
</template>
<script>
import Lazy from './Lazy'
export default {
name: 'HelloWorld',
components: {
Lazy
},
data() {
return {
msg: 'Welcome to Your Vue.js App',
rendered: true,
notifs: [
'Notif 1',
'Notification 2 is here!',
'Here comes another notification',
'And another here ...'
],
loaded: true
}
}
}
</script>
Mon fichier animation.css:
.fade-enter-active, .fade-leave-active {
transition: opacity .5s
}
.fade-enter, .fade-leave-to {
opacity: 0
}
Y at-il la résolution de façon ce problème en utilisant transitions vue ou d'autres moyens?