Javascript 两种不同元素同时淡入淡出过渡

我是Vue js和转换的新手，我正在设计一个Vue组件，在该组件中，我打算包装从服务器缓慢加载的数据，以便在数据不可用时显示加载gif

它很好用。但是，当我添加一个简单的淡入淡出转换，使加载的gif在数据可用时淡入淡出和内容淡入（反之亦然），内容和gif在一个出现和另一个消失时会相互上下推动

这是我的

Lazy.vue

组件文件：

<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>

---

是否有任何方法可以使用vue转换或任何其他方法解决此问题？

您需要

位置：绝对用于gif和内容的CSS规则：

说：

…页面布局中没有为元素创建空间。相反，它是相对于其最近的祖先（如果有的话）定位的；否则，它将相对于初始包含块放置

您可能还需要
position:relative

<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>

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s
}
.fade-enter, .fade-leave-to {
  opacity: 0
}