2
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 전환 또는 다른 방법을 사용합니까?