同时淡入和淡出两个不同元素的转换

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

我animation.css文件：

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

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

来源

2017-10-17 NimaAJ

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

Doc说：

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

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

来源

2017-10-17 17:07:46

同时淡入和淡出两个不同元素的转换

回答

相关问题