两个div元素之间的vue2过渡

【问题标题】：vue2 transition between two div elements两个div元素之间的vue2过渡
【发布时间】：2017-09-05 01:40:30
【问题描述】：

我发现转换在两个 div 元素之间不起作用，如下所示：

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

但如果只有一个 div 元素，例如：

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

这是 vue 2 的错误吗？还是我不能将它与两个 div 元素一起使用？

如何使用两个 div 元素..？

【问题讨论】：

标签： vue.js transition vuejs2

【解决方案1】：

您应该为 div 添加唯一的 key 属性以使其工作：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>

【讨论】：