[英]fade in and fade out transition for two different elements at the same time
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. 我是Vue js和转换的新手,我正在设计一个Vue组件,我打算在服务器中懒散地加载数据,以便在数据不可用时显示加载的gif。
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.
然而,当我添加一个简单的淡入淡出过渡以使加载gif淡出并且当数据可用时内容淡入(或反之亦然)时,内容和gif在出现一个时向上或向下相互推送而另一个消失。
This is my Lazy.vue
component file: 这是我的
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>
And a sample usage of it: 以及它的示例用法:
<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>
My animation.css file: 我的animation.css文件:
.fade-enter-active, .fade-leave-active {
transition: opacity .5s
}
.fade-enter, .fade-leave-to {
opacity: 0
}
Is there any way solving this issue using vue transitions or any other ways? 有没有办法使用vue过渡或任何其他方式解决这个问题?
You need position: absolute;
你需要的
position: absolute;
CSS rule for your gif and content: JSFiddle example . 你的gif和内容的CSS规则: JSFiddle示例 。
...no space is created for the element in the page layout.
...没有为页面布局中的元素创建空间。 Instead, it is positioned relative to its closest positioned ancestor if any;
相反,它相对于其最近定位的祖先(如果有的话)定位; otherwise, it is placed relative to the initial containing block.
否则,它相对于初始包含块放置。
You also will probably need position: relative;
您也可能需要
position: relative;
for parent element of gif and content. 对于gif和内容的父元素。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.