두 div 요소 간의 vue2 전이

두 div 요소 간의 vue2 전이

다음과 같이 두 개의 div 요소 간에는 전환이 작동하지 않습니다.

<transition name="fade">
  <div v-if="show">111</div>
  <div v-else>222</div>
</transition>

단, 다음과 같은 div 요소가1개만 있으면 동작합니다.

<transition name="fade">
  <div v-if="show">111</div>
  <p v-else>222</p>
</transition>

vue 2 버그입니까?아니면 2개의 div 요소에서는 사용할 수 없는 건가요?

어떻게 두 개의 div 요소로 그것을 할 수 있을까?

한 것을 .key동작시키기 위해 divs에 속성을 부여합니다.https://jsfiddle.net/a8fv6rvp/1/

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">
  <transition name="fade" mode="out-in">
    <div v-if="show" key="1">111</div>
    <div v-else key="2">222</div>
  </transition>
  <button @click="show = !show">Toggle</button>
</div>

new Vue({
    el: '#app',
  data: {
    show: true
  }
});

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

언급URL : https://stackoverflow.com/questions/43315926/vue2-transition-between-two-div-elements