同时为两个不同的元素淡入淡出过渡

Posted 2023-02-22

【中文标题】同时为两个不同的元素淡入淡出过渡

【英文标题】：fade in and fade out transition for two different elements at the same time

【发布时间】：2018-03-29 06:09:26

【问题描述】：

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

以及它的示例用法：

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

我的动画.css 文件：

.fade-enter-active, .fade-leave-active 
  transition: opacity .5s

.fade-enter, .fade-leave-to 
  opacity: 0

有没有办法使用 vue 转换或任何其他方式解决这个问题？

【参考方案1】：

您的 gif 和内容需要 position: absolute; CSS 规则： JSFiddle example.

Doc 说：

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

您可能还需要 position: relative; 作为 gif 和内容的父元素。