Vue.js - 条件之间的转换(v-if和v-else)

Question

有没有办法可以transition在vuejs条件v-if和v-else？之间使用？

举个例子:

<transition name="fade">
    <p v-if="show">hello</p>
    <p v-else>Goodbye</p>
</transition>

---

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

---

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

.fade-enter,
.fade-leave-active {
    opacity: 0
}

我似乎无法transition在这样的场景中工作,在切换时show,<p>元素transition在它们之间使用.

https://jsfiddle.net/fbponh78

Answer 1

您的问题是由于vue转换未看到元素更改,它只看到内容更改.

这是因为两个元素都具有相同的标记名称,所以vue只是重用它.要抵消这一点,请为两个元素赋予不同的键值:

<p key=1 v-if="show">hello</p>
<p key=2 v-else>Goodbye</p>

https://jsfiddle.net/ferrybig/fbponh78/13/

Answer 2

使用两个过渡：

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

.fade-enter-active {
  transition: opacity .5s
}

.fade-enter,
.fade-leave-active {
  opacity: 0
}

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

<div id="demo">
  <button v-on:click="show = !show">
    Toggle
  </button>
  <transition name="fade">
    <p v-if="show">hello</p>
  </transition>
  <transition name="fade">
    <p v-if="!show">Goodbye</p>
  </transition>
</div>

https://jsfiddle.net/saeedahmadi/fbponh78/10/