同時淡入和淡出兩個不同元素的轉換

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

同時淡入和淡出兩個不同元素的轉換

回答

相關問題