Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

fade in and fade out transition for two different elements at the same time

Tags:

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?

like image 368
Nima Ajdari Avatar asked Oct 17 '17 14:10

Nima Ajdari


People also ask

What is fade-in and fade-out in animation?

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.

What is a fade-in out transition?

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.

How do you add a fade-in effect?

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.


1 Answers

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.

like image 149
Sui Dream Avatar answered Oct 05 '22 04:10

Sui Dream