I'm a newcomer to Vue.js and the world of transitions. Currently, I'm working on designing a Vue component that will handle lazy loading data from a server. My goal is to display a loading gif when data is not yet available.
Everything seems to be functioning correctly. However, when I attempted to implement a simple fade transition to smoothly switch between displaying the loading gif and rendering the content upon data availability, I encountered an issue. The content and gif seem to push each other up or down while transitioning in and out simultaneously.
Here's a snippet from my Lazy.vue component file:
<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>
Additionally, here's how I implemented it in a sample usage:
<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>
Lastly, my animation.css file contains the following:
.fade-enter-active, .fade-leave-active {
transition: opacity .5s
}
.fade-enter, .fade-leave-to {
opacity: 0
}
Are there any solutions using Vue transitions or alternative methods to address this issue?