title: fade in and fade out transition for two different elements at the same time
body: <p>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.</p>
  
  <p>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.  </p>
  
  <p>This is my <code>Lazy.vue</code> component file:</p>
  
  <pre><code>&lt;template&gt;
    &lt;div class="fixed-pos"&gt;
      &lt;transition name="fade"&gt;
          &lt;slot v-if="loaded"&gt;&lt;/slot&gt;
          &lt;div v-else&gt;
              &lt;img src="../assets/loading.gif"/&gt;
          &lt;/div&gt;
      &lt;/transition&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    name: 'Lazy',
    props: {
      loaded: {
        type: Boolean
      }
    }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>And a sample usage of it:</p>
  
  <pre><code>&lt;template&gt;
    &lt;div&gt;
      &lt;button @click="loaded = !loaded"&gt;Toggle&lt;/button&gt;
          &lt;lazy :loaded="loaded"&gt;
              &lt;ul v-if="rendered"&gt;
                  &lt;transition-group name="fade"&gt;
                      &lt;li v-for="notif in notifs" v-bind:key="notif"&gt;
                          &lt;span&gt;{{notif}}&lt;/span&gt;
                      &lt;/li&gt;
                  &lt;/transition-group&gt;
              &lt;/ul&gt;
          &lt;/lazy&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  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
      }
    }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>My animation.css file:</p>
  
  <pre><code>.fade-enter-active, .fade-leave-active {
    transition: opacity .5s
  }
  .fade-enter, .fade-leave-to {
    opacity: 0
  }
  </code></pre>
  
  <p>Is there any way solving this issue using vue transitions or any other ways?</p>