Vuejs2 在VueJS中平滑设置v-show动画

我试图在Vuejs中使用transition为两个div设置动画。下面是我使用的代码（JSFIDLE）。但我不知道为什么它不起作用

vue

---

首先。。您正在导入Vue 1。 如果导入Vue 2，则此html有效

<div id="vue-instance">
  <div>
    <transition name="fade">
      <div v-if="show" key="yellow">
        <div class="box yellow"></div>
      </div>
      <div v-if="!show" key="blue">
        <div class="box blue"></div>
      </div>
    </transition>
    <a href="#" @click="show = !show">Change</a>
  </div>  
</div>

---

然后您应该阅读文档，如果您想了解如何处理元素之间的转换

您必须在每个div中添加key，除了在fiddle中添加vue 2.x外，还需要进行以下更改：

为什么来自

在具有相同标记名的元素之间切换时，必须通过赋予它们唯一的键属性来告诉Vue它们是不同的元素。否则，Vue的编译器将仅为提高效率而替换元素的内容。即使在技术上不必要的情况下，在一个组件中始终为多个项目设置关键帧也是一种良好的做法

HTML

<transition name="fade">
  <div key="3" v-if="show">
    <div class="box yellow"></div>
  </div>
</transition>
<transition name="fade">
  <div key="1" v-if="!show">
    <div class="box blue"></div>
  </div>
</transition>

---

小提琴：好的。我已经用vue 2更新了它。动画仍然不是平滑的。重叠。你能再看一次那张照片吗。我已经更新了it@GijoVarghese所以之前没有动画，现在它不是平滑的，因为在过渡时有两个div可用，需要播放一些其他CSS属性，以及它应该是怎样的，因为不能将一个div置于另一个div之上。vuejs本身不可能吗？不使用css关键帧？@Saurabh建议您在代码

v-if

中使用，而不是

v-show

？我应该使用v-if而不是v-show吗？（同样，如果使用v-if更好

v-if='！value'

或

v-else

？@Costantin check和@Saurabh，我认为这对v-show不起作用。当使用v-show->将v-if更改为v-show时，这条规则被打破，不会像在v-if中那样平稳过渡。）

var vm = new Vue({
  el: '#vue-instance',
  data: {
    show: true
  }
});

<div id="vue-instance">
  <div>
    <transition name="fade">
      <div v-if="show" key="yellow">
        <div class="box yellow"></div>
      </div>
      <div v-if="!show" key="blue">
        <div class="box blue"></div>
      </div>
    </transition>
    <a href="#" @click="show = !show">Change</a>
  </div>  
</div>

<transition name="fade">
  <div key="3" v-if="show">
    <div class="box yellow"></div>
  </div>
</transition>
<transition name="fade">
  <div key="1" v-if="!show">
    <div class="box blue"></div>
  </div>
</transition>

<transition name="fade" mode="out-in">
  <div key="3" v-if="show">
    <div class="box yellow"></div>
  </div>
  <div key="1" v-if="!show">
    <div class="box blue"></div>
  </div>
</transition>