I am new to Vue js and the transitions and I am designing a Vue component, in which I intend to wrap data being loaded lazily from server so that when data is unavailable, a loading gif is displayed.
It works just fine. However, when I add a simple fade transition to make loading gif fade out and content fade in when data is available ( or vice versa) at the same time, the content and gif push each other up or down when one is appearing and the other disappearing.
This is 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>
And a sample usage of it:
<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>
My animation.css file:
.fade-enter-active, .fade-leave-active {
transition: opacity .5s
}
.fade-enter, .fade-leave-to {
opacity: 0
}
Is there any way solving this issue using vue transitions or any other ways?
The Fade In/Fade Out behavior lets you dissolve into and out of any object by ramping the opacity of the object from 0 percent to 100 percent at the start, and then back to 0 percent at the end. You can eliminate the fade-in or fade-out effect by setting the duration of the Fade In Time or Fade Out Time to 0 frames.
A fade is a subtype of dissolve transition that gradually moves to or from an image to or from black. Fades are often used at the beginning/end of movies. But in rare cases, filmmakers use fades inside of a scene, for example when a character comes in and out consciousness.
All you need to do is drag and drop your video to your timeline, select the transition tab on the left sidebar then drag a transition onto the timeline. You can also add a fade-in or fade-out to a video, audio, or image clip by selecting it in the timeline and using the fade tab.
You need position: absolute;
CSS rule for your gif and content:
JSFiddle example.
Doc says:
...no space is created for the element in the page layout. Instead, it is positioned relative to its closest positioned ancestor if any; otherwise, it is placed relative to the initial containing block.
You also will probably need position: relative;
for parent element of gif and content.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With