동시에 2개의 다른 요소에 대한 전이 페이드인 및 페이드아웃

동시에 2개의 다른 요소에 대한 전이 페이드인 및 페이드아웃

저는 Vue js와 이행에 익숙하지 않습니다.Vue 컴포넌트를 설계하고 있습니다.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>

my animation.css 파일:

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

vue 전환이나 다른 방법을 사용하여 이 문제를 해결할 수 있는 방법이 있습니까?

당신은 필요하다position: absolute;gif 및 콘텐츠의 CSS 규칙: JSFiddle 예시.

의사:

...페이지 레이아웃의 요소를 위한 공간이 생성되지 않습니다.대신 가장 가까운 위치에 있는 상위 항목이 있는 경우 상대적으로 배치되고 그렇지 않은 경우 초기 포함 블록에 상대적으로 배치됩니다.

또, 아마,position: relative;gif 및 컨텐츠의 상위 요소에 대한 것입니다.

언급URL : https://stackoverflow.com/questions/46792031/fade-in-and-fade-out-transition-for-two-different-elements-at-the-same-time